javascript - ListView - 使用 jQuery 搜索带有过滤器的列表

Question

我的过滤结果有问题，这是我的 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: jsfiddle

问题是当我逐个字母输入“西类牙”时，结果丢失。我希望它仍然存在。有人知道怎么解决吗？

Answer 1

在您的代码中，当您首先输入小写的liverpol并且您的文本值具有正确的值(首先是大写)时，会出现问题。 您应该首先输入相同的输入值和搜索值文本。

你可以用

来做到这一点

.toLowerCase 函数

.toUpperCase 函数

这里有一些引用链接toLowerCase toUpperCase

$("#populerNameKey").on('keyup', function(){
var value = $(this).val().toLowerCase();
$("#destPopuler li").each(function () {
    if ($(this).text().toLowerCase().search(value) > -1) {
        $(this).show();
        $(this).prev('.country').last().show();
    } else {
        $(this).hide();
    }
});   
})