Question

希望我能将它解释为有意义的地方，通过搜索我在标题中使用的术语，我发现的最多可以找到大量的自动完成示例，但我找不到任何东西。我有一个按钮列表（它们现在被编码为输入），我想添加一个搜索字段，当用户在搜索字段中键入时，该字段将缩小按钮的范围。

比如说，我有30个热门网站按钮。如果一个人想要拉谷歌，他们就会开始输入它，这将首先包括其中包含字母“G”的所有内容，然后是“O”等。其他所有内容都会从页面“消失”。

我可以想办法手动执行此操作，但我认为我的代码不会干。可能设置一个“on”和“off”ID，并使用CSS显示：none或者那种效果。

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

Answer 1

轻松自如。首先，如果所有数据都已经在用户处，则不必过滤服务器的答案。另外，你不应该写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);
 }
 };

如果输入了某个，请隐藏不匹配的：

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);

使用AJAX或类似技术缩小现有列表的范围

1 个答案: