Question

我正在网络应用中构建搜索功能。我已经开始工作了，但无法弄清楚如何在用户退格时删除项目、出现的 search bar no longer match the items 中的字母或搜索词是否完全清空。

所有结果都留在那里。

这里是 AJAX 调用


$("#search-box").keyup(function() {
  search()
});

const search = function() {
  let searchTerm = document.getElementById("search-box").value;
    $.ajax({
      type: 'GET',
      url: '/electra/search/',
      data: {
        'search_term': searchTerm
      },
      success: function(data) {
        data.forEach(([cafeName]) => {
          var cafeName = cafeName;
          var searchList = $(
            `<div>
                    <ul class="list-item border-top" data-idtext="${cafeName}" id="${cafeName}">${cafeName}</ul>
                </div>`
          );
          searchList.appendTo('#search-results');
        });
  
        $("ul").click(function(event) {
          var selectedVenue = event.target.id;
          $("#search-results").empty()
          console.log("Clicked" + " " + selectedVenue);
          getVenueDetails(selectedVenue)
        });
      }
    });
};

Answer 1

当输入文本并调用 search 时，您将结果附加到现有列表

searchList.appendTo('#search-results')

当添加新文本时，您需要清空结果。你可以简单地调用

$("#search-results").empty()

在 search 函数的开始处。

一些注意事项：

var cafeName = cafeName; 毫无意义，可以删除。
在您的 keyup 处理程序中，您可以检查文本的长度。如果它是空白的，只需删除搜索结果，不要费心调用 search

$("#search-box").keyup(function() {
  const searchTerm = document.getElementById("search-box").value;

  if (searchTerm.length === 0) {
    $("#search-results").empty()
    return // don't need to do anything else
  }

  search()
})

为了提高性能，最好在开始搜索之前设置最小长度。如果搜索框只包含字母 a，那将是很多毫无意义的匹配。考虑至少 3 个返回更好的匹配。

$("#search-box").keyup(function() {
  const searchTerm = document.getElementById("search-box").value;
  
  // Don't want to search if only a few characters
  if (searchTerm.length < 3) {
    if (searchTerm.length === 0) {
      // Deleted search term so remove everything
      $("#search-results").empty()
    }
    return // don't need to do anything else
  }

  search()
})

如评论中所述，ul 应包含一个 li。如果您不想要这个并且每个 ul 都是可点击的，请将其设为锚元素。

var searchList = $(
  `<div>
    <a href="#" class="list-item border-top" data-idtext="${cafeName}" id="${cafeName}">${cafeName}</a>
  </div>`
);

动态移除搜索结果

1 个答案: