jquery搜索框從側面Verticle菜單搜索鏈接

Question

我想爲我的水平菜單有一個搜索框。

<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，當我清除搜索我想我原來的菜單。是否有可能實現？

Answer 1

試試這個：

<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> 

http://jsfiddle.net/KG637/

Answer 2

這是你正在尋找

HTML內容：

<div class="nav"> 
Search Menu : <input type="text" name="search" id='txtSearch'/> 
<br/> 
<ul> 
<li><a class='list' id='link1' href="#"> Link1 </a></li> 
<li><a class='list' id='link2' href="#"> Link2 </a></li> 
<li><a class='list' id='link3' href="#"> Link3 </a></li> 
<li><a class='list' id='link4' href="#"> Link4 </a></li> 
<li><a class='list' id='link5' href="#"> Link5 </a></li> 
<li><a class='list' id='link6' href="#"> Link6 </a></li> 
</ul> 
</div> 

SCRIPT：

$(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'); 
    } 
}); 
}); 

See the demo here.

編輯

更新的小提琴忽略大小寫敏感。