jQuery搜索/過濾器不適用於州/城市列表

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)