Javascript Jquery搜索框从侧面垂直菜单搜索链接

我想为我的水平菜单设置一个搜索框

<div class="nav">
    Search Menu : <input type="text" name="search"/>
    <br/>
    <ul>
      <li><a href="#"> Link1 </a></li>
      <li><a href="#"> Link2 </a></li>
      <li><a href="#"> Link3 </a></li>
      <li><a href="#"> Link4 </a></li>
      <li><a href="#"> Link5 </a></li>
      <li><a href="#"> Link6 </a></li>
    </ul>
</div>

搜索菜单：

---

我想搜索

link1

，它排序并显示

link1

，当我清除搜索时，我想要我的原始菜单。有可能实现吗？

这就是你想要的吗

HTML:

搜索菜单：

脚本：

$(document).ready(function(){
var linklist = $('.list');
var myarr = [];
for (i = 0; i < linklist.length ; i++) {
    myarr.push(linklist[i].text.trim().toLowerCase())
}
$('#txtSearch').keyup(function(){
   var text = $('#txtSearch').val().toLowerCase();
   var found = myarr.indexOf(text);
    if(found >-1)
    {        
        $('#' + text).css('background-color','Yellow');
    }
    else
    {
        $('.list').css('background-color','White');
    }
});
});

$（文档）.ready（函数（）{
var linklist=$（'.list'）；
var myarr=[]；
对于（i=0；i-1）
{        
$（'#'+text）.css（'background-color'，'Yellow'）；
}
其他的
{
$（'.list'）.css（'background-color'，'White'）；
}
});
});

编辑

更新了fiddle以忽略区分大小写

试试这个：

    <script> 


$(document).ready(function () {


$("#search").on("keyup", function () {
if (this.value.length > 0) {   
  $("li").hide().filter(function () {
    return $(this).text().toLowerCase().indexOf($("#search").val().toLowerCase()) != -1;
  }).show(); 
}  
else { 
  $("li").show();
}
}); 

});

    </script> 

$（文档）.ready（函数（）{
$（“#搜索”）。在（“键控”，函数（）{
如果（this.value.length>0）{
$（“li”）.hide（）.filter（函数（）{
返回$（this）.text（）.toLowerCase（）.indexOf（$（“#search”）.val（）.toLowerCase（））！=-1；
}).show（）；
}  
否则{
$（“li”）.show（）；
}
}); 
});

---

指定您尝试过的，非工作/半工作小提琴。没有人会从头开始为您编写代码。

    <script> 


$(document).ready(function () {


$("#search").on("keyup", function () {
if (this.value.length > 0) {   
  $("li").hide().filter(function () {
    return $(this).text().toLowerCase().indexOf($("#search").val().toLowerCase()) != -1;
  }).show(); 
}  
else { 
  $("li").show();
}
}); 

});

    </script>