Question

背景

我想要达到的目的是在一开始就显示一份国家清单。现在我们有两个选项，在点击状态时，它的各个城市的列表应该向下切换，第二个选项是使用搜索框来过滤所有州和城市的状态。清除搜索隐藏了一切。

ISSUE：

我面临的问题仅在于搜索结束！搜索对我的测试数据完全正常，但是当输入实时数据时，搜索仅从第二个字符起作用，例如搜索城市 Aberdeen ;如果我们搜索 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)

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

1 个答案: