Javascript 列表视图-使用jQuery使用筛选器搜索列表

我对筛选结果有问题，以下是我的HTML：

<input type="text" class="form-control" id="populerNameKey">

清单项目：

<ul id="destPopuler">
  <li class="country">England</li>
  <li class="testing"><a href="#">Liverpool</a></li>
  <li class="testing"><a href="#">London</a></li>
  <li class="country">Italy</li>
  <li class="testing"><a href="#">Roma</a></li>
  <li class="testing"><a href="#">Milan</a></li>
</ul>

英国


意大利

下面是完整的JavaScript：

问题是当我一个字母一个字母地输入“西班牙”时，结果就丢失了。我希望它仍然存在。有人知道如何修复它吗？

对列表项的输入和值都使用.toLowerCase（）

---

您正在比较大写字母和小写字母。

在您的代码中，当您首先以小写字母键入liverpol，并且您的文本值为“有一个正确的值，以大写字母开头”时，会出现问题。 输入值和搜索值应该相同

你可以用它来做

.toLowerCase函数

.图珀凯斯函数

这里有一些链接供参考

---

看起来您需要不区分大小写的搜索。可以使用带有忽略大小写（

i

）标志的正则表达式（）。比如

RegExp（值，“i”）

。这将在进行比较时忽略案例。所以，你必须改变

$(this).text().search(value) > -1

到

函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

*{
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#李美儿{
背景色：#E2；
游标：默认值；
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}

我的电话簿

什么是错误？如果我一个字母一个字母地输入“利物浦”，结果就会丢失。我希望它仍然存在，谢谢你的解释和参考。我又犯了一个错误，如果我输入“西班牙”，为什么前面的标题列表仍然被调用？尝试将.prevAll（）更改为.prev（），并将.first（）更改为.last-previous标头仍然保留，因为您使用的是prevAll（）和first（），谢谢，就像在W3中一样。这是我的一个参考答案如果您满意此答案，请投票给我检查左侧方框。例如，在“A”更改为“标题”的情况下，您对从搜索中排除标题分类列表项有何建议？如何使标题列表项在整个搜索过程中始终可见？我认为，如果将标题从搜索中排除，并且它在整个搜索过程中始终可见，那么它将更容易访问。

$(this).text().search(value) > -1

$(this).text().search(RegExp(value, "i")) > -1