Javascript: поиск и автоматический переход в большом списке без JQuery

Одна из распространённых проблем web-программирования (особенно во всякого рода админках) - это необходимость выбирать нужный пункт из длинного HTML-списка <select>.

Во-первых, листать длинный список неудобно. Во-вторых, даже не очень большие списки (сотни элементов) некоторые браузеры (тот же Chrome) начинают отображать с глюками прокрутки.

В лучшем случае, в помощь себе мы имеем встроенный современными браузерами автоматический переход по первой букве ввода - то есть, если мы при выделенном на странице списке наберём "Б", то попадём на первый элемент списка с одержимым тега <option>, начинающимся на эту букву, и т.д. Увы, переход по введённой части слова в этом случае уже не работает. Тем более, я хочу, чтоб эта была любая часть слова, а не только начало.

Наверное, можно поискать решение на JQuery, но проще написать несколько строчек кода без него.

Из соображений максимальной простоты, обработчик события от клавиатуры onKeyUp, автоматически работающий с тегом списка <select>, мы не будем пытаться модифицировать, а просто разместим слева от списка поле ввода <input type="text">, в которое юзер может вводить нужную часть названия искомого пункта. При этом будет совершаться автоматический переход на первый подходящий пункт списка.

Ниже приводится законченный пример формы и обработчика события. Попробуйте ввести, например, "п", а затем "понк" :)

Код в работе (нужен включённый в браузере JavaScript):

Не получиться могло только в том случае, если Ваш браузер не понимает кодировку Windows-1251, установленную на этой странице. Тогда попробуйте "g" латинскую.

Полный листинг скрипта:

<script type="text/javascript">
 function lowercase (val) {
  var upper="QWERTYUIOPASDFGHJKLZXCVBNMЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮЁ";
  var lower="qwertyuiopasdfghjklzxcvbnmйцукенгшщзхъфывапролджэячсмитьбюё";  
  var c,t,s='';
  for (var i=0; i<val.length; i++) {
   c=val.substring(i,i+1);
   t=upper.indexOf(''+c);
   if (t>-1) c=lower.substring(t,t+1); 
   s+=c;
  }
  return s;
 }
 function list_select () {
  var a = document.getElementById('user_id');
  var b = lowercase(document.getElementById('input').value); 
  for (i=0; i<a.options.length; i++) {
   if (lowercase(a.options[i].innerHTML).indexOf(b)>-1) {
    a.options[i].selected = true; return; 
   }
  }
 }
</script>
<form>
<input id="input" onkeyup = "list_select()">
<select id="user_id" size="1">
 <option value="1">Alpha</option>
 <option value="2">Alux</option>
 <option value="3">Beta</option>
 <option value="4">Bepa</option>
 <option value="5">Gamma</option>
 <option value="6">Пончик</option>
 <option value="7">Понка</option>
 <option value="8">Бяша</option>
</select>
</form>

В отличие от стандартного метода indexOf, код не различает большие и маленькие буквы за счёт собственной реалзиации метода lowercase (перевод латинских и русских букв в маленькие; при необходимости преобразуйте скрипт в свою кодировку).

Проверено в IE и Chrome, работает, больше ничего тут под рукой нет :)

P.S. Ниже показан более современный вариант такого скрипта (выбор из списка стран), который активно пользуется стилями и объектной моделью документа для решения задачи. Предполагается, что исходник можно увидеть из исходника открывающейся страницы, а сохранён он будет как файл .html в кодировке Юникода utf-8.

 Список стран с выбором подсписка по мере ввода (6 Кб)

12.09.2014, 14:14 [11762 просмотра]