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的LI “AllProducts”。

你也可以使用 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/

如何通过输入项目的ID或序列在列表项的文本中查找值

2 个答案:

修改