I have a todo list where users can add notes. These notes are stored in local Storage, where the values are then displayed on the page after submitting input. I've already implemented the add notes part of the application but I also want to implement a search bar that filters the list showing only what matches the characters that the user inputs. What can I do?

我有一个待办事项列表，用户可以在其中添加备注。这些备注存储在本地存储中，在提交输入后，这些值将显示在页面上。我已经实现了应用程序的添加备注部分，但我还想实现一个搜索栏，该搜索栏过滤列表，只显示与用户输入的字符匹配的内容。我能做什么?

<div class="search-container mt-1">
<div class="search">
<input id="search-term" type="text" class="searchTerm" placeholder="Search..." oninput="search()">
<button type="submit" class="searchButton">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</div>

<div class="container">
<div class="flex justify-space">
<div class="text-space" id="scroll-container" onclick="scrollSection()">
<ul id="note"> </ul>
</div>
</div>
</div>

// open and close popup form
function openForm() {
    document.getElementById("myForm").style.display = "block";
}
  
function closeForm() {
    document.getElementById("myForm").style.display = "none";
}

const notes = document.getElementById("note");
const addNotes = document.getElementById("add-notes");

// store user input to local storage
let notesStorage = localStorage.getItem("note")
  ? JSON.parse(localStorage.getItem("note"))
  : [];

myForm.addEventListener("submit", (e) => {
    e.preventDefault();
    notesStorage.push(addNotes.value);
    localStorage.setItem("note", JSON.stringify(notesStorage));
    listBuilder(addNotes.value);
    addNotes.value = "";
});

// Displays user input from localstorage when posted
const listBuilder = (text) => {
    let note = document.createElement("li");
    note.innerHTML = text + ' <button id="trash" onclick="deleteNote(this)"> <i class="fa-solid fa-trash"></i> </button>';
    notes.appendChild(note);
};

// Shows all contents in the array
const getNotes = JSON.parse(localStorage.getItem("note"));
getNotes.forEach((note) => {
    listBuilder(note);
});

// Deletes notes on page
const deleteNote = (btn) => {
    let el = btn.parentNode;
    const index = [...el.parentElement.children].indexOf(el);
    notesStorage.splice(index, 1);
    localStorage.setItem("notes", JSON.stringify(notesStorage));
    el.remove();
};

function scrollSection() {
    document.getElementById("scroll-container").style.overflow = "scroll";
}

const searchQuery = document.getElementById('search-term').value

    for(i = 0; i < notesStorage.length; i++) {
    if(searchQuery === notesStorage[i]) {
        return listBuilder(note)
    }
    }

To implement a search bar that filters your list of notes based on user input and updates the DOM, you can follow these steps using JavaScript:

要实现根据用户输入过滤笔记列表并更新DOM的搜索栏，可以使用JavaScript执行以下步骤：

1. Retrieve data from local storage and initialize your notes list.

// 

    Retrieve notes from local storage (assuming you stored them as an array of strings)
    let notes = JSON.parse(localStorage.getItem('notes')) || [];

2. Create a function to render the notes on the page.

function renderNotes() {
  const noteList = document.getElementById('note');
  noteList.innerHTML = ''; // Clear the previous list

  notes.forEach((note) => {
    const li = document.createElement('li');
    li.textContent = note;
    noteList.appendChild(li);
  });
}

3. Create a function for the search functionality.

function search() {
  const searchTerm = document.getElementById('search-term').value.toLowerCase();

  const filteredNotes = notes.filter((note) =>
    note.toLowerCase().includes(searchTerm)
  );

  // Update the DOM with the filtered notes
  notes = filteredNotes;
  renderNotes();
}

4. Ensure that you call renderNotes() initially to display all notes, and then use the search() function to filter notes as the user types.

renderNotes();

5. Attach the search function to the input field's oninput event.

<input id="search-term" type="text" class="searchTerm" placeholder="Search..." oninput="search()">

With these steps, your page should update the list of notes as the user types into the search input field, filtering the notes based on their content and updating the DOM accordingly. Make sure to adjust the code according to how your notes are stored in local storage.

通过这些步骤，您的页面应该会随着用户在搜索输入字段中键入内容来更新笔记列表，根据笔记的内容过滤笔记，并相应地更新DOM。确保根据您的笔记在本地存储中的存储方式调整代码。