Question

我有一个HTML列表<ul>，其中包含许多<li>元素，如下所示：

<ul>
  <li><a href="talent.aspx">Talent Map</a></li>
  <li><a href="assets.aspx">Assets Map</a></li>
  <li><a href="know.aspx">Knowledge Gaps</a></li>
  ... This is a pretty long list
</ul>

我在列表顶部有一个文本框，用户可以在其中输入一些字符，以过滤<a>中带有匹配文本的列表。在上面的示例中，如果用户键入“地图”，则应该为前两个项目过滤列表。

当前，我已经创建了一个硬编码的JavaScript集合对象，其中包含整个菜单的文本和锚链接。在过滤时，我隐藏原始菜单，并从链接集合对象中的匹配项中重新创建链接。但这对我来说似乎不是正确的方法。

Answer 1

HTML代码

<ul id="myList">
    <li><a href="talent.aspx">Talent Map</a></li>
    <li><a href="assets.aspx">Assets Map</a></li>
    <li><a href="know.aspx">Knowledge Gaps</a></li>
</ul>

JS代码

 $(document).ready(function(){
     $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myList li").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
     });
 });

Answer 2

$('#your_text_box').keyup(function(){
var valThis = $(this).val();
$('ul>li>a').each(function(){
 var text = $(this).text().toLowerCase();
    (text.indexOf(valThis) == 0) ? $(this).show() :    $(this).hide();         
   });
 });

Answer 3

您可以通过jquery这样实现...

$('input').on("change",function(){
    var filter_text = $(this).text();
    $('ul>li').each(function(){
        if($(this).text().indexOf(filter_text) > -1){
            $(this).show();
        }
        else {
            $(this).hide();
        }
    });
});

注意：这是一个基于文本值的简单jquery过滤器...

根据jQuery中子元素的InnerText过滤HTML列表

3 个答案: