狼队前锋拉森因伤缺阵，纽卡有意再报价引外界猜测？

Q 如何在Javascript中进行搜索功能？

javascript

search

filter

我试图在我的网页上做一个简单的搜索功能。每个产品都有一个名字，我希望搜索框过滤出产品，如果它们的名字与搜索框中的文本不匹配。如何在Javascript中进行搜索功能？

任何人都可以提供一种高效的方式来做到这一点？

请问您可以发布上述代码的JavaScript函数？除非你添加了这样的函数，否则目前没有搜索功能可言。 – 2015-03-02 13:04:33

只是一个提示：你想在HTML和JavaScript中使用小写字母和短划线来命名ID。 'searchBar'或'search-bar'比'searchbar'更合适。 – 2015-03-02 13:12:02

回答

1

这里是一个简单的搜索功能，将隐藏不是搜索词匹配的任何产物：

window.search = function() {

var search = document.getElementById("searchbar").value.toLowerCase();

var products = document.querySelectorAll(".product");

for (var i = 0; i < products.length; i++) {

var name = products[i].querySelector("b").textContent.toLowerCase();

products[i].style.display = name.indexOf(search) > -1 ? 'block' : 'none';

}

};

如果你想搜索中也在寻找说明，你可以做这样的事情：

window.search = function() {

var search = document.getElementById("searchbar").value.toLowerCase();

var products = document.querySelectorAll(".product");

for (var i = 0; i < products.length; i++) {

var name = products[i].querySelector("b").textContent.toLowerCase();

products[i].style.display = (name.indexOf(search) > -1 || desc.indexOf(search) > -1) ? 'block' : 'none';

}

};

如果你有很多产品，你可能想限制搜索直到用户停止输入一段时间（也许是500毫秒左右），这样就不会在每次击键时触发搜索。

这正是我所期待的。谢谢 – user7074482 2015-03-02 14:57:59

没问题，很高兴它帮助！ – 2015-03-02 14:58:27

搜索框中的内容和产品中的名称大小写敏感吗？搜索p不会显示产品，但搜索P会显示产品。如果它不区分大小写会更好。 – user7074482 2015-03-02 15:06:07

我会在稍后编辑我的答案以使其不区分大小写 – 2015-03-02 15:12:38

编辑了答案以使其不区分大小写。希望现在能更好地工作！ – 2015-03-02 15:17:31

这就像一个魅力。非常感谢你！！ – user7074482 2015-03-02 15:36:01

我可以在搜索框中输入多个单词，例如“产品1”。这不会显示该产品（它应该显示，因为“产品1”是存在的），但如果我将搜索框中的文本更改为“产品”，它会显示所有包含“产品”的产品。有没有办法调整它，以便它可以接受多个单词？ – user7074482 2015-03-02 16:13:27

当然可以，你只需要将搜索词拆分为一个数组并检查每个单词。我会编辑我的答案来展示如何做到这一点。 – 2015-03-02 16:22:35

window.search = function() {

var search = document.getElementById("searchbar").value.toLowerCase();

var searchWords = search.trim().split(' ');

var products = document.querySelectorAll(".product");

for (var i = 0; i < products.length; i++) {

var name = products[i].querySelector("b").textContent.toLowerCase();

var match = true;

for (var j = 0; j < searchWords.length; j++) {

if (name.indexOf(searchWords[j]) === -1 && desc.indexOf(searchWords[j]) === -1) {

match = false;

break;

}

products[i].style.display = match ? 'block' : 'none';

};

这个更新的代码会将搜索框中的每个单词拆分成一个数组，然后检查每个产品的名称和描述是否包含所有这些单词。如果一个产品包含所有的搜索词，它就会显示出来；否则就会隐藏。你可以尝试将这个代码替换到你的项目中看看效果。