卖空清单项目

Question

当我使用jquery或任何其他语言在输入框中写任何单词时，我想缩短列表项

<div class="container">
<form>
   <label id="stylem">Name</label>
   <input class="search" placeholder="Search" />
</form>

<div id="design">
  <ul>
       <li>Manish</li>
       <li>Rahul</li>
       <li>Ankit</li>
       <li>Kapil</li>
       <li>Nisha</li>
       <li>Somiya</li>
       <li>Lovely</li>
       <li>Hashim</li>
       <li>Rihana</li>
  </ul>
</div>
<br/>
<br/>
</div>

Answer 1

您可以使用HTML5的一项功能：<datalist>：

  

HTML <datalist>元素包含一组<option>元素，表示可用于其他控件的值。

＆＃13;

＆＃13;

<input list="names" name="design" id="design" placeholder="Search">
<datalist id="names">
    <option value="Manish">
    <option value="Rahul">
    <option value="Ankit">
    <option value="Kapil">
    <option value="Nisha">
    <option value="Somiya">
    <option value="Lovely">
    <option value="Hashim">
    <option value="Rihana">
</datalist>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试此代码

$(".search").on("input",function() {
  var $li = $("#design li"), text = $li.text();
  $li.toggle(text.indexOf(this.value)==0); // or != -1 for anywhere in text
});