jQuery 搜索/过滤器不适用于州/城市列表 ul li

Question

背景：

我想要实现的是在开始时显示一个状态列表。现在我们有两个选项，单击一个州时，其各自城市的列表将向下切换，第二个选项是使用搜索框过滤所有州的城市并清除搜索隐藏所有内容。

问题：

我面临的问题只是搜索结束！搜索在我的测试数据上运行得非常好，但是当输入实时数据时，搜索仅从第二个字符开始，例如搜索城市阿伯丁；如果我们搜索 berdeen 而不是 Aber..

，搜索将起作用

测试数据小提琴： http://jsfiddle.net/nLjv6u2c/71/

实时数据小提琴： http://jsfiddle.net/nLjv6u2c/72/

HTML：

<input type='text' id='cityFilter' />
<ul id="stateCityList">
    <li class="state">MARYLAND</li>
    <ul class="cities">
      <li class="city">Aberdeen</li>
      <li class="city">Danville</li>
      <li class="city">Kensington</li>
      <li class="city">Queenstown</li>
    </ul>
    <li class="state">VIRGINIA</li>
    <ul class="cities">
      <li class="city">Abingdon</li>
      <li class="city">Dublin</li>
      <li class="city">Linton Hall</li>
      <li class="city">Marshall</li>    
    </ul>
    <li class="state">WASHINGTON</li>
    <ul class="cities">
      <li class="city">Aberdeen</li>
      <li class="city">Easton</li>
      <li class="city">Lynnwood</li>
    </ul>
</ul>

jQuery：

/* Hide all Cities on page load */
$('.cities').each(function() {$(this).hide();});

$('#cityFilter').on('keyup', function () {
  var value = this.value;
  if (value != "") {
    $('#stateCityList ul li').hide().each(function () {
      if ($(this).not('.state').text().search(value) > -1) {
        $(this).prevAll('.state').first().add(this).show();
        $(this).parent('ul').show();
      }
    });
  } else {
    /* Make sure all hidden Cities are shown on search clear to support toggle functionality*/
    $('#stateCityList ul li').show().each(function () {
        $(this).prevAll('.state').first().add(this).show();
        $(this).parent('ul').show();
    });
    /* Hide all Cities on search clear */
    $('.cities').hide();
  }
});
$('.state').click(function() {
  $(this).next('ul').slideToggle();
});

Answer 1

将值和搜索都设为小写将使搜索正常工作。

变化：

if ($(this).not('.state').text().search(value) > -1)

收件人：

if ($(this).not('.state').text().toLowerCase().search(value.toLowerCase()) > -1)