我正在网络应用中构建搜索功能。我已经开始工作了,但无法弄清楚如何在用户退格时删除项目、出现的 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)
});
}
});
};
答案 0 :(得分: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>`
);