как создать прямую панель поиска?

Question

Начинающий здесь, пожалуйста, медведь со мной!

Как создать прямую панель поиска (ищет по мере ввода), которая взаимодействует с уже существующими изображениями гиперссылок? Вот изображение Microsoft Paint, чтобы объяснить, что я пытаюсь сказать: http://i.imgur.com/TPboNCy.png

Я действительно надеюсь, что вы, ребята, знаете, о чем я говорю, я нашел учебники о том, как создать живой поиск, который отображает результаты прямо под поиском bar (вроде как выпадающее меню), но я не нашел никаких учебных пособий, в которых объяснялось, как использовать прямую панель поиска для взаимодействия с существующими изображениями гиперссылок (сужение количества изображений в результатах).

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, включая изображения, которые соответствуют и присваивают его свойству innerHTML div , Вы должны запустить его onkeypress так же, как в примере.