使用AJAX或类似的技术来缩小已经存在的列表

Use AJAX or similar technology to narrow down already existing list

本文关键字：缩小 列表 存在 技术 AJAX 使用      更新时间：2023-09-26

希望我能解释到它有意义的地方，我能找到的最多的搜索术语，就像我在标题中使用的，给出了大量的自动完成的例子，但没有什么是我想要的。我有一个按钮列表(它们现在被编码为输入)，我想添加一个搜索字段，当用户在搜索字段中输入时，它将缩小按钮的范围。

比如说，我有30个热门网站的按钮。如果一个人想用Google搜索，他们会先把所有含有字母"G"的东西都输入进去，然后是"O"，等等。其他的一切都会从页面上"消失"。

我可以想到一种方法来做这个手动，但我认为我的代码不会是DRY。可以设置一个"开"answers"关"的ID，并使用CSS显示:none或类似的效果。

我认为最好的方法是通过AJAX，但可能有一些javascript巫术更适用。

要轻松。首先，如果所有数据都已经在用户那里，就没有必要在服务器端过滤答案。另外，你不应该写html然后用js过滤，你应该用js写然后生成一个html输出。让我们从结构开始:

var links=[
  {
       name:"google",
       url:"http://google.com"
   },
   {nextone}
   ];

现在生成html:

中的链接
window.onload=function(){
    var container=document.body;//change this to your needs
  for(i=0;i<links.length;i++){
     var link=links[i];
     link.html=document.createElement("a");
     link.html.innerHTML=link.name;
     link.html.src=link.url;
     container.appendChild(link.html);
 }
 };

如果输入sth，隐藏不匹配的

function filter(string){
 //loop trough links
 for(i=0;i<links.length;i++){
    var link=links[i];
    //if string doesnt match name
    if(!link.name.split(string)[1]){
       link.html.style.display="none";
     }else{
       link.html.style.display="block";
     }
  }
  }

像这样使用:

filter("goo");

你可以将它绑定到输入:

yourinput.addEventListener("onchange",function(){filter(this.value)},false);
相关文章：