Как добавить функцию быстрого поиска к неупорядоченному тексту списка?

Question

У меня есть неупорядоченный список имен со скрытым переполнением, что делает их прокручиваемыми. каждый li имеет вложенное изображение, пролет с первым и последним именем в нем и ссылку a href, отображающую небольшой значок после этого. Список очень длинный. Как я могу сделать эту ul доступной для поиска по тексту фамилии (im accepting- путем добавления ввода), чтобы она переходила к имени в списке в соответствии с первыми буквами имени? ваниль Javascript вариант пожалуйста

HTML

<ul> 
<li><img class="makeIcon" src=""><span>FirstName LastName</span><a href="#"><img src=""> 
</a></li> 
....many of these 
</ul> 

Answer 1

это, казалось, работало в моих тестах. Предполагая, что вашей «ul» присваивается уникальный идентификатор.

Мой ваниль js немного ржавый. Я уверен, что есть более сжатые способы сделать это. Я создал var для «поискового термина» (для целей тестирования), но, как вы сказали, вы получите значение из ввода.

<ul id="searchList"> 
    <li><img class="makeIcon" src=""><span>Marko Pollo</span><a href="#"><img src=""></a></li> 
    <li><img class="makeIcon" src=""><span>Dr. Paul</span><a href="#"><img src=""></a></li> 
</ul> 


var ul_parent = document.getElementById('searchList'); 
var span_elements = ul_parent.getElementsByTagName("span"); 
var a_elements = ul_parent.getElementsByTagName("a"); 
var search_term = "Paul"; 
for (var i = 0, len = span_elements.length; i < len; i++) { 
    var lName = span_elements[i].innerHTML.replace(/\w+\s(\w+)$/, function(_, $1){ 
      return $1; 
    }); 
    if(search_term == lName){ 
     console.log('found match'); 
     a_elements[i].focus(); 
     // once a match is found, return false out or do something else. 
    } 
} // if you reach this point, you can add an else{} and alert user no matches 

Я не добавлял, но вы можете пойти по этому пути, чтобы держать это дело агностиком: .toLowerCase(), так, что-то вроде:

search_term.toLowerCase() == lName.toLowerCase() 

Answer 2

Вы можете использовать содержимое диапазона тега или атрибута данных.

Но вы ДОЛЖНЫ использовать jQuery с методом show/hide и изменить событие на вашем входе.

Это займет всего несколько строк кода, но некоторые плагины могут это сделать.

jQuery Autocomplete изменяет способ отображения.