通过搜索输入

Question

朋友们，我正在努力学习如何制作一个“琐碎的”＆＃39;搜索输入..只有HTML而不咨询数据库。

我有八个选项的列表，并希望制作一个JS函数来帮助我隐藏与搜索不匹配的选项。

http://codepen.io/pen/

<div class="search__dropdown">
    <div class="search__dropdown-header">
        <h3 class="search__dropdown-title">Hostel</h3>
    </div>
    <div class="search__dropdown-body">
        <input class="search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
        <ul class="search__dropdown-list search__dropdown-list--hostel">
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
                <label class="search__dropdown-label" for="hostel1">one</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
                <label class="search__dropdown-label" for="hostel2">two</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
                <label class="search__dropdown-label" for="hostel3">three</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
                <label class="search__dropdown-label" for="hostel4">four</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
                <label class="search__dropdown-label" for="hostel6">five</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
                <label class="search__dropdown-label" for="hostel7">six</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
                <label class="search__dropdown-label" for="hostel8">seven</label>
            </li>
            <li class="search__dropdown-item">
                <input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
                <label class="search__dropdown-label" for="hostel9">eight</label>
            </li>
        </ul>
    </div>
</div>

Answer 1

1. 附加input事件以触发每个字母更改
2. 遍历列表项并检查其文本是否包含当前值
3. 如果没有，请隐藏项目
＆＃13;
＆＃13;
$('.search').on('input', function() {
  var search = $(this).val();
  var options = $('li:has([name*="hostel"])');
  options.each(function() {
    $(this).show();
    if ($(this).find('[for*="hostel"]').text().indexOf(search) < 0) {
      $(this).hide();
    }
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="search__dropdown">
  <div class="search__dropdown-header">
    <h3 class="search__dropdown-title">Hostel</h3>
  </div>
  <div class="search__dropdown-body">
    <input class="search search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
    <ul class="search__dropdown-list search__dropdown-list--hostel">
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
        <label class="search__dropdown-label" for="hostel1">one</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
        <label class="search__dropdown-label" for="hostel2">two</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
        <label class="search__dropdown-label" for="hostel3">three</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
        <label class="search__dropdown-label" for="hostel4">four</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
        <label class="search__dropdown-label" for="hostel6">five</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
        <label class="search__dropdown-label" for="hostel7">six</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
        <label class="search__dropdown-label" for="hostel8">seven</label>
      </li>
      <li class="search__dropdown-item">
        <input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
        <label class="search__dropdown-label" for="hostel9">eight</label>
      </li>
    </ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;