Javascript 根据我在文本框中写的内容（类似于自动完成），有没有一种简单的方法可以从页面中删除项目？

我正在尝试实现一个功能，例如，如果一个页面上有50个链接，您开始在一个框中键入，并且根据您键入的内容，项目开始消失。这与“自动完成”的想法相同，但不是创建可能的链接列表，而是从页面中删除不相关的链接

我很抱歉，如果我的解释不够清楚，如果你需要更多的细节，请问我，我会在评论中回答

---

提前感谢。

尝试使用此功能。在文本框的“onKeyUp”事件中调用此函数

 function hideFiltered(){
    var text=$("#textbox").val();
    var links=$('a[name="linksToHide"]');

    for(var i=0;i<links.length;i++){
    link=links[i];
    if(link.html().indexof(text)>0){
    link.hide();
    }else{
    link.show();

    }

    }


    }



    }

函数hidefilted（）{
var text=$（“#文本框”）.val（）；
var links=$（'a[name=“linksToHide”]”）；
对于（var i=0；i0）{
link.hide（）；
}否则{
link.show（）；
}
}
}
}

尝试使用此函数。在文本框的“onKeyUp”事件中调用此函数

 function hideFiltered(){
    var text=$("#textbox").val();
    var links=$('a[name="linksToHide"]');

    for(var i=0;i<links.length;i++){
    link=links[i];
    if(link.html().indexof(text)>0){
    link.hide();
    }else{
    link.show();

    }

    }


    }



    }

函数hidefilted（）{
var text=$（“#文本框”）.val（）；
var links=$（'a[name=“linksToHide”]”）；
对于（var i=0；i0）{
link.hide（）；
}否则{
link.show（）；
}
}
}
}
$（“.selector for input”）.keyup（函数（）{
var text=this.value；
$（“.selector for a”）.each（function（）{
var it=$（本）；
it.text（）.indexOf（text）<0？it.hide（）：it.show（）
});
});
$（“.selector for input”）.keyup（函数（）{
var text=this.value；
$（“.selector for a”）.each（function（）{
var it=$（本）；
it.text（）.indexOf（text）<0？it.hide（）：it.show（）
});
});


好吧，当用户键入时，您可以每x毫秒迭代一次所有
a
元素，并隐藏与输入不匹配的元素（可能使用正则表达式）。@Cameron这将非常有用inefficient@Livingston：如果间隔足够大，则不一定（显然，在用户停止键入后代码继续运行是不可取的）好吧，当用户键入时，您可以每隔x毫秒迭代所有
a
元素，并隐藏与输入不匹配的元素（可能使用正则表达式）“卡梅隆，那太好了inefficient@Livingston：如果间隔足够大，则不一定如此（显然，在用户停止键入后，代码继续运行是不可取的）
name
在页面上应该是唯一的，为什么不使用
class
？
name
不需要是唯一的，
id
应该是唯一的。但是我同意应该使用class。而且代码也不是真正正确的。
indexOf
比较应该考虑0位置（因此
=/code>）.
name
在页面上应该是唯一的，为什么不使用
class
？
name
不需要是唯一的，
id
应该是唯一的。但是我同意应该使用class。代码也不是真正正确的。
indexOf
比较应该考虑0位置（因此
=/code>）。为什么不必要地隐藏所有项目，然后再次循环所有项目？是的，我同意，而且速度很慢。我只是尝试了一种不同的方法。当它们消失时，有没有办法让它们从页面中删除空间。例如，如果您在有
的情况下尝试此方法，或者如果它们都位于不同的行上，则行变为空，空间变为空这些线中有几行保留在那里，看起来很奇怪。有没有办法消除这个空间的存在？（如果我没有很好地解释，请告诉我）尝试搜索样本，中间的线消失了，但那里有空白，是否可以将第三行推到第二行（消除空间）不要留下空白？谢谢！@user如果你想让链接出现在自己的行中，我建议你使用
ul
，然后内容就会相应地流动。尝试处理
br
不会是万无一失的，除非它是绝对必要的。为什么不必要地隐藏所有项目，然后再次循环所有项目？是的，我同意而且速度很慢。我只是尝试了另一种方法。当它们消失时，有没有办法让它们消失？你从页面中删除它们的空间。例如，如果你在
时尝试这个方法，或者如果它们都在不同的行上，行变空，这些行的空间保持在那里，这看起来很奇怪。有没有办法删除它们的存在（如果我没有很好地解释，请告诉我）尝试搜索样本，中间行消失，但有空白，是否可以将第三行推到第二行（删除空白）不要留下空白？谢谢！@user如果您希望链接显示在自己的行中，我建议使用
ul
，然后内容将相应地流动。尝试处理
br
不会是万无一失的，除非它是绝对必要的。最好缓存
$（.a）选择器）
，而不是每次按键都匹配元素。这取决于具体情况。jQuery文档明确指出，不应将结果保留太长时间。在这里，您要查找
。每当用户在文本字段中按键时，
选择器，因此您每秒要查询DOM 3到4次（取决于键入速度）最好缓存
$（“.selector for a”）
，而不是每次按键都匹配元素。这取决于具体情况。jQuery文档明确指出，不应将结果保留太长时间。在这里，您要查找
。每当用户在文本字段中按键时，
选择器，因此您每秒要查询DOM 3到4次（取决于打字速度）
var anchors = $('a');

$('#filter').bind('keyup', function () {
  var filterValue = $.trim(this.value);

  anchors.hide().filter(function () {
    return $(this).text().indexOf(filterValue) !== -1;
  }).show();
});