Question

初学者，请耐心等待我！

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

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

Answer 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上发射它。

如何创建实时搜索栏？

1 个答案: