如何通過輸入項目的ID或序列在列表項的文本中查找值

Question

我有一個列表（它比這段代碼長得多，大約700-800件）

<asp:TextBox ID="txt_serial"> </asp:TextBox>
<asp:Button ID="btn_find">Find </asp:Button>

<ul id="AllProducts" class="ui-droppable">
    <li class="ui-draggable" value="0">Sterling Silver Jesus Name Necklace( 101-01-071-02)</li>
    <li class="ui-draggable" value="101">14k 'Gold' 'Comfort Fit' Inside's Engraved Ring( 101-14-001-01)</li>
    <li class="ui-draggable" value="1000">Jewelry Polishing Cloths( 106-01-002-01)</li>
</ul>

當我在文本字段中輸入產品序列號（顯示在每個<li>項目的文本中）時，我希望在下面的列表中看到相應的項目，這樣我就不需要在整體中查找它了名單。

例如：

• 輸入(106-01-002-01)
• 看到條目Jewelry Polishing Cloths突出顯示

所以目標類似於自動完成，但是當我的搜索匹配時突出顯示一個條目。

Answer 1

您可以創建一個索引，如：

var index = {'101-01-071-02':0,'101-14-001-01':1,'106-01-002-01':2};

然后你可以找到LI之類的東西：

var value = '106-01-002-01';
var lis = document.getElementById('AllProducts').getElementsByTagName('li');

if (value in index) {
  var theOne = lis[index[value]];
}

請注意， getElementsByTagName返回一個實時NodeList，因此您可以獲取該集合，然后在DOM中修改所有LI中的LI列表，該集合將始終反映作為“AllProducts”后代的LI。

您還可以使用indexOf數組。

編輯

這是一個完成這項工作的小提琴： http ： //jsfiddle.net/jPKtz/ 。 它構建索引，如果產品序列號正確則選擇產品，並清除以前的條目。

Answer 2

我會這樣做的

$("#searchBtn").on("click", function(event){
    $("#AllProducts li:contains('" + $("#searchText").val() + "')").css("background", "#ccc");
});

http://jsfiddle.net/vkuD9/1/