如何创建实时搜索栏？ [关闭]答案

【问题标题】：how to create a live search bar? [closed]如何创建实时搜索栏？ [关闭]
【发布时间】：2015-12-02 12:28:58
【问题描述】：

这里是初学者，请多多包涵！

如何创建与现有超链接图像交互的实时搜索栏（键入时搜索）？下面是一张 Microsoft Paint 图片来解释我想说的话：http://i.imgur.com/TPboNCy.png

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

【问题讨论】：

这正是您要找的：sitepoint.com/jquery-filter-images
我会检查一下，MHakvoort。谢谢。
欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议您通过 Google 或通过搜索 SO 进行一些额外的研究，然后尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
好的。对不起，不会再这样做了。

标签： javascript jquery html css ajax

【解决方案1】：

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

基本上，您的选择是：

只要不同的图片集与您的过滤字符串匹配，就从头开始重新绘制图片列表。
首先显示所有图像。当搜索字符串发生变化时，隐藏不适合搜索的图像并显示适合的图像。

第二个似乎更适合您的问题并且实现起来更简单，因此我将在此处提供解决方案的示例。只有 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 属性。您应该以与示例中相同的方式在 onkeypress 上触发它。

【讨论】：