使用Javascript过滤HTML字符串,如果字符串包含word

Using Javascript to Filter a HTML ul li if string contains word

本文关键字:字符串 如果 包含 word 使用 过滤 HTML Javascript      更新时间:2023-09-26

我有这段javascript代码,它过滤列表项,返回包含搜索框中第一个单词的项:

var input = document.getElementById('input');
input.onkeyup = function () {
var filter = input.value.toUpperCase();
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
    var name = lis[i].getElementsByClassName('name')[0].innerHTML;
    if (name.toUpperCase().indexOf(filter) == 0) 
        lis[i].style.display = 'list-item';
    else
        lis[i].style.display = 'none';
}
}

这个脚本只对输入的第一个单词起作用,对第二个单词不起作用。

例如,如果我有一个名为"car"的搜索查询,它应该返回:

  • 蓝色汽车
  • <
  • 红车/gh>
  • 黑色汽车

目前查询没有返回任何结果。

任何帮助都将不胜感激。

谢谢。

改变这一行

if (name.toUpperCase().indexOf(filter) == 0) 

if (name.toUpperCase().indexOf(filter) != -1) 

,它适用于整个字符串,而不仅仅是第一个单词

我认为问题是

if (name.toUpperCase().indexOf(filter) == 0) 
使用

if (name.toUpperCase().split(' ').indexOf(filter) >= 0) 

它将在名称中搜索准确的单词