如何创建一个实时搜索栏？

Question

初学者，请耐心等待！

如何创建与现有超链接图像进行交互的实时搜索栏（键入时进行搜索）？ 继承人微软油漆图像来解释我想说的：http://i.imgur.com/TPboNCy.png

我真的希望你们知道我在说什么，我找到了关于如何创建实时搜索，显示搜索结果正确的教程（有点像一个下拉菜单），但我还没有找到任何教程解释如何使用实时搜索栏与现有超链接图像进行交互（缩小结果中的图像数量）。

Answer 1

根据你想要使用的特定目标和库，不同的实现将是最好的。这个问题相当模糊，所以很难给你提供建议。

基本上，你的选择是：

1. 从头开始重新绘制图像列表时不同的画面设置过滤器字符串相匹配。
2. 首先显示所有图像。当搜索字符串更改时，隐藏不适合搜索的图像并显示适合的图像。

第二个似乎更适合你的问题，实施起来更简单，所以我将在这里提供一个解决方案的例子。只是HTML/JavaScript，没有图书馆。

HTML：

<form id="filter_form"> 
    <p>Search:</p> 
    <input id="filter" name="filter" type="text" size="40" onkeyup="filter_pictures();"></input> 
</form> 
<p> 
    <img class="filtered" src="url1"></img> 
    <img class="filtered" src="url2"></img> 
    <img class="filtered" src="url3"></img> 
</p> 

的Javascript：

function filter_pictures() { 
    var $i = 0; 

    //Get the text we use to filter 
    var $filter = document.getElementById('filter').value; 

    //Get all images 
    var $imgsCollection = document.getElementsByClassName('filtered'); 

    //For every image check if url has filter in it and hide/show as needed. 
    for ($i = 0; $i < $imgsCollection.length; $i++) { 
     if ($imgsCollection[$i].getAttribute('src').indexOf($filter) > -1) { 
      $imgsCollection[$i].style.display = 'block'; 
     } else { 
      $imgsCollection[$i].style.display = 'none'; 
     } 
    } 
} 

根据特定的目标，你可以赚更多的事件触发的过滤功能（不只是的onkeyup）。

如果您想要重绘图路线，可以将图像url存储在数组中，根据过滤器检查该数组，然后构建html，包括匹配的图像并将其分配给div的innerHTML属性。你应该像示例中那样按照相同的方式开火。