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

希望我解释一下它的合理性，我可以通过搜索术语来找到最多的东西，就像我在标题中使用的那样提供了大量的自动填充示例，但没有什么比我'寻找。我有一个按钮列表（他们现在编码为输入），我想添加一个搜索字段，将缩小按钮，因为用户键入搜索字段。使用AJAX或类似的技术来缩小已经存在的列表

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

我可以想办法做到这一点手动，但我认为我的代码不会干。可能设置“开”和“关”ID，并使用CSS来显示：无或其他效果。

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

来源

2016-11-18 Kyle

只看角JS的主页上的第三个例子 - 它的过滤列表https://angularjs.org/ – Djave

的时间等，你添加一个文本框用的onkeyup/oninput监听器，阅读文本框的值，选择按钮，循环播放集合，并隐藏那些没有文本的部分匹配.... – epascarello

所以...你想我们什么，为你写点东西？杀一些鸡？ –

要容易。起初，如果所有数据都已经在用户身上，那么无需过滤服务器上的答案。另外，你不应该写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");

You coul ð结合，要输入：

yourinput.addEventListener("onchange",function(){filter(this.value)},false);

来源

2016-11-18 16:01:44

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

回答

相关问题