По замыслу дизайнера проекта над которым я сейчас работаю на сайте должен присутствовать т.н. «живой поиск» или т.н. suggest. Я же зову его просто — autocomplete. Из известных мне плагинов сразу приглянулся autocomplete из набора jquery user interface. Однако беда! Данное решение не позволяет воспроизводить(доступным образом) своё форматирование в выпадающем списке.
Итак, в вёрстке имеем:
1. Собственно сам input;
2. Клавишу button для отправки строки поиска;
3. Слой div в котором будет выводится всякая найденная и пришедшая фигня с сервера.
Стили такие для элементов:
.div-search{ width:500px }
#search-field{ width:100%; padding:5px; float:left }
.suggest-block{ position:absolute }
.search-button{ margin-left:15px; margin-top:2px; float:left }
.clear{ clear:both }
Далее собственно сама лайба на Javascript. Весь функционал основан на событии KEYUP:
$(function(){
var act_item = -1; // счётчик для выделенной строки
var time_up; // таймер для задержки отправки на сервер
$('#search-field').keyup(function(e){
var val = $(this).val();
var $item = $('.suggest-item');
if(e.keycode === 40){ // клавиша вниз
}else if(e.keyCode === 38){ // клавиша вверх
}else if(e.keyCode === 27){ // клавиша esc
}else if(e.keyCode === 13){ // enter
}else if(val.length > 2){ // введено более двух символов
clearTimeout(time_up);
time_up = setTimeout(function(){
$.getJSON("/search", {term:val}, function (r) {
$('.suggest-block').html(content);
});
act_item = -1;
},500);
}
});
});
Велик естественно просто показывает как это осуществить, а не даёт вам скопипастить код для вставки в свой проект.