实时搜索本地存储（在阵列中搜索）-跟进

Question

我想按名称创建实时搜索并将其显示在屏幕上。我有2个功能searchContent和displaySearchContent。我像“ DrColossos”所建议的那样遍历了searchContent中的对象。但是我不知道下一步该怎么做。

我知道已经回答了完全相同的问题。但是我不完全理解。 Live search localstorage (search in array)

如果您想重新创建我的代码，可以复制它，然后自己添加一些书签。 这是我的代码：

displayBookmarks(siteName, siteUrl);
displaySearchContent(siteName, siteUrl);

document.getElementById("bookmarkForm").addEventListener("submit", saveBookmark);

// Save bookmark values.
function saveBookmark(event) {
  var siteName = document.getElementById("siteName").value;
  var siteUrl = document.getElementById("siteUrl").value;

  event.preventDefault();

  var bookmarkObject = {
    name: siteName,
    url: siteUrl,
  };
  if (localStorage.getItem("bookmarks") === null) {
    var bookmarks = [];
    bookmarks.push(bookmarkObject);
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  } else {
    var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
    bookmarks.push(bookmarkObject);
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  }
  document.getElementById('bookmarkForm').reset();
  displayBookmarks();
  displaySearchContent();

}

// Display bookmark object
function displayBookmarks() {
  var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  var bookmarksResults = document.getElementById("bookmarksResults");

  // Build output
  bookmarksResults.innerHTML = '';
  for (let index = 0; index < bookmarks.length; index++) {
    var name = (bookmarks[index].name).charAt(0).toUpperCase() + bookmarks[index].name.slice(1);
    var url = bookmarks[index].url;

    // Display menu
    bookmarksResults.innerHTML += '<div class = "card bg-light p-3">' +
      '<h3>' + name +
      '<button><a class = "btn btn-primary visit" target = "_blank" href = "' + url + '">Visit</a></button>' +
      '<button><a onclick = "deleteBookmark(\'' + url + '\')" class = "btn btn-danger" >Delete</a></button>' +
      '</h3>' +
      '</div>';
  }
}

document.getElementById("searchName").addEventListener("keyup", searchContent);
// PROBLEM BELOW
function searchContent() {
  var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  var searchName = document.getElementById("searchName").value;

  for (obj in bookmarks) {
    if (bookmarks[obj].name == searchName) {
      console.log("hello");
    }
  }
  var bookmarks = JSON.stringify(localStorage.getItem("bookmarks"));

}
function displaySearchContent() {
  var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  var displaySearchContent = document.getElementById("displaySearchContent");


  // Build output
  displaySearchContent.innerHTML = '';
  for (let index = 0; index < bookmarks.length; index++) {
    var name = (bookmarks[index].name).charAt(0).toUpperCase() + bookmarks[index].name.slice(1);
    var url = bookmarks[index].url;

    // Display menu
    displaySearchContent.innerHTML += '<div class = "card bg-light p-3">' +
      '<h3>' + name +
      '<button><a class = "btn btn-primary visit" target = "_blank" href = "' + url + '">Visit</a></button>' +
      '<button><a onclick = "deleteBookmark(\'' + url + '\')" class = "btn btn-danger" >Delete</a></button>' +
      '</h3> ' +
      '</div>';
  }
}

// Delete bookmark
function deleteBookmark(url) {
  var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  for (var index = 0; index < bookmarks.length; index++) {
    if (bookmarks[index].url == url) {
      bookmarks.splice(index, 1);
    }
  }
  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  displayBookmarks();
  displaySearchContent();
}

<main>
  <div class="container">
    <div class="header clearfix">
      <h3 class="text-muted">Bookmarker</h3>
    </div>
    <div id="bookmarkWebsite" class="tabContent">
      <div class="jumbotron">
        <form id="bookmarkForm">
          <div class="form-group">
            <label>Website Name</label>
            <input type="text" class="form-control" id="siteName" placeholder="Website Name">
          </div>
          <div class="form-group">
            <label>Website URL</label>
            <input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="row marketing">
        <div class="col-lg-12">
          <div id="bookmarksResults">
          </div>
        </div>
      </div>
    </div>
    <div id="searchWebsite" class="tabContent">
      <div class="jumbotron">
        <h2>Search your website</h2>
        <form id="searchForm">
          <div class="form-group">
            <label>Search bookmarks</label>
            <input type="text" class="form-control" id="searchName" placeholder="Website Name">
          </div>
        </form>
      </div>

      <div class="row marketing">
        <div class="col-lg-12">
          <div id="displaySearchContent">
          </div>
        </div>
      </div>
    </div>
</main>
<hr>