0

我有一个列表（它比这段代码长得多，大约 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查看突出显示的条目

因此，目标类似于自动完成，但在与我的搜索匹配时突出显示条目。

4

2 回答 2

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 列表，该集合将始终反映作为“AllProducts”后代的 LI。

您也可以使用带有indexOf的数组。

编辑

这是一个完成这项工作的小提琴：http: //jsfiddle.net/jPKtz/。它建立索引，如果产品序列号正确则选择产品，并清除以前的条目。

于 2013-06-18T09:20:48.473 回答
1

我会这样做

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

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

于 2013-06-18T09:20:50.510 回答