[英]Return results in a list by a search input
Friends, I am trying to learn how I can make a 'trivial' search input.. only the HTML without consulting the database. 朋友,我正在尝试学习如何进行“简单的”搜索输入。
I have a list of eight options, and would like to make a JS function to help me hide the options that don't match the search. 我有八个选项的列表,并且想制作一个JS函数来帮助我隐藏与搜索不匹配的选项。
http://codepen.io/pen/ 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>
input
event to trigger every letter change input
事件以触发每个字母更改 $('.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(); } }); });
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.