Question

我有一个带有隐藏溢出的无序列表，这使得它们可以滚动。每个li都有一个嵌套图片，一个带有名字和姓氏的文字，以及一个显示小图标的a href链接。名单很长。如何通过姓氏文本（我假设 - 通过添加输入）使这个ul可搜索，以便它根据姓氏中的第一个字母跳转到列表中的名称？香草javascript选项请

HTML

<ul>
<li><img class="makeIcon" src=""><span>FirstName LastName</span><a href="#"><img src="">
</a></li>
....many of these
</ul>

Answer 1

这似乎在我的测试中起作用。假设您的“ul”被赋予唯一ID。

我的香草js有点生锈。我确信有更简洁的方法可以做到这一点。我为“搜索词”创建了一个var（用于测试目的），但就像你说的那样 - 你将从输入中获得值。

<ul id="searchList">
    <li><img class="makeIcon" src=""><span>Marko Pollo</span><a href="#"><img src=""></a></li>
    <li><img class="makeIcon" src=""><span>Dr. Paul</span><a href="#"><img src=""></a></li>
</ul>


var ul_parent = document.getElementById('searchList');
var span_elements = ul_parent.getElementsByTagName("span");
var a_elements = ul_parent.getElementsByTagName("a");
var search_term = "Paul";
for (var i = 0, len = span_elements.length; i < len; i++ ) {
     var lName = span_elements[i].innerHTML.replace(/\w+\s(\w+)$/, function(_, $1){
           return $1;
     });
     if(search_term == lName){
        console.log('found match');
        a_elements[i].focus();
        // once a match is found, return false out or do something else.
     }
} // if you reach this point, you can add an else{} and alert user no matches

我没有添加这个，但是你可能想要通过这条路线来保持它不可知：.toLowerCase（），所以，像这样：

search_term.toLowerCase() == lName.toLowerCase()

Answer 2

您可以使用span标记或数据属性的内容。

但是你应该在显示/隐藏方法中使用jQuery并在输入上更改事件。

代码只需几行，但有些插件可以做到。

jQuery自动填充会改变它的显示方式。

如何为无序列表文本添加快速搜索功能？

2 个答案: