Мне понадобился выпадающий список. Причём список может быть непредсказуемо большой.

Штатный select из HTML не тянет, т.к. мне скорее всего будет нужна возможность ввода подстроки для последующего поиска. фильтрацией.

Что-то подобное можно видеть здесь. Классная библиотека! Отличная работа, но что-то мне не понравилась лицензия. Я пишу сайт для себя, и соответственно не буду делать релизов с открытыми кодами, поэтому мне видимо не подходит бесплатная лицензия. Хотя возможно я просто что-то неправильно понял.

Если кто-то что-то сможет посоветовать буду рад.

А пока, пишем сами. После исканий и гуглений, а также компиляции и адаптации где-то чего-то подсмотренного к своей теме я сделал примерно следующей вариант:

На форме помещается простое текстовое поле, на котором на событии OnClick подвешена функция, которая у специально созданного DIV подставляет контент.

Вот такой получился код для Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script>
function dr(){
 
instr=document.bookmarkform.hostername.value;
 
var myArray1 = ['1gb.ru','49406','best-hoster.ru',.............,'хостфабрика','эскхостинг' ];
 
res='';
I=0; J=0;
 
while ( (I<myArray1.length) && (J<5) ){
 if ( myArray1[I].search(instr)>-1) {
    res+='<div class="hoster_item" onClick="SetText(\''+myArray1[I]+'\')">'+myArray1[I]+'</div>';
    J++;
    }
    I++;
}
 
document.getElementById('result').innerHTML=res;
document.getElementById('result').style.border="10px";
}
 
 
function SetText(a){
document.bookmarkform.hostername.value=a;
//document.bookmarkform.text1.value=b;
document.getElementById('result').innerHTML='';
}</script>

В этом скрипте массив строк выпадающего списка статично определён в массиве myArray1. Признаюсь, что для непредсказуемо большого списка статичный массив не есть хорошо.

Далее осталось просто в теле формы добавить специальное событие. Событие вызывается через 50 милисекунд после нажатия, это сэкономит процессорные ресурсы, если человек печатает со скоростью свыше 20 знаков в минуту

1
2
3
4
5
6
7
8
9

.....................
<td>Хостер</td>
<td><input type="text" name="hostername" value="" class="text" onkeydown="setTimeout('dr()',50)"  /></td>
 
</tr>
<tr>
<td></td>
<td><div id="result"></div> </td>
...........................

К сожалению, мне не удалось реализовать регистрочувствительный поиск. Может кто подскажет?

А вообще я склоняюсь к использованию AJAX.

Нет постов по теме.

Пинги и комменты не доступны.