如何创建实时搜索栏? [英] how to create a live search bar?

问题描述

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

Beginner here, please bear with me!

如何创建一个实时搜索栏(键入时进行搜索)，以与现有的超链接图像进行交互? 这是一张Microsoft Paint图像，用于解释我要说的内容: http://i.imgur.com/TPboNCy.png

How do I create a live search bar (searches as you type) that interacts with already existing hyperlink images? Heres a Microsoft Paint image to explain what I'm trying to say: http://i.imgur.com/TPboNCy.png

我真的希望你们知道我在说什么，我找到了有关如何创建实时搜索的教程，这些搜索可以在搜索栏的下方显示结果(有点像下拉菜单)，但是我还没有找到任何教程介绍了如何使用实时搜索栏与现有的超链接图像进行交互(缩小结果中的图像数量).

I really hope you guys know what I'm talking about, I found tutorials on how to create live search that displays results right under the search bar (kinda like a drop down menu) but I haven't found any tutorials that explained how to use the live search bar to interact with existing hyperlink images (narrowing down the number of images in the results).

推荐答案

根据您的特定目标和您想使用的库，最好使用不同的实现.这个问题含糊不清，因此很难为您提供建议.

Depending on your particular goals and libraries you'd like to use, different implementations will be best. The question is rather vague, so it's difficult to give advice to you.

基本上，您的选择是:

1. 只要其他图片集与您的过滤器字符串匹配，便从头开始重新绘制图像列表.
2. 首先显示所有图像.当搜索字符串更改时，隐藏不适合搜索的图像并显示适合的图像.

第二个似乎更适合您的问题，并且更易于实现，因此在此我将提供解决方案的示例.只是HTML/Javascript，没有库.

The second one seems to be more appropriate for your question and is simpler to implement, so I will provide an example for the solution here. Just HTML/Javascript, no libraries.

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:

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

Depending on your particular goal, you may make more events fire the filtering function (not just onKeyUp).

如果要进行重画，可以将图像URL存储在数组中，对照过滤器检查该数组，然后构建包括匹配图像的html并将其分配给div的innerHTML属性.您应该以与示例相同的方式在keypress上触发它.

If you would go the re-drawing route, you can store the image urls in an array, check that array against the filter, then build the html including the images that matched and assign it to the innerHTML property of a div. You should fire it onkeypress the same way as in the example.

这篇关于如何创建实时搜索栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！