По замыслу дизайнера проекта над которым я сейчас работаю на сайте должен присутствовать т.н. «живой поиск» или т.н. suggest. Я же зову его просто — autocomplete. Из известных мне плагинов сразу приглянулся autocomplete из набора jquery user interface. Однако беда! Данное решение не позволяет воспроизводить(доступным образом) своё форматирование в выпадающем списке.

Итак, в вёрстке имеем:
1. Собственно сам input;
2. Клавишу button для отправки строки поиска;
3. Слой div в котором будет выводится всякая найденная и пришедшая фигня с сервера.

<div class="div-search"><input id="search-field" type="text" name="search" value=""></div>
<input class="search-button" onclick="return!1" type="submit" value="искать">

Стили такие для элементов:

.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);
    }
  });
});

Велик естественно просто показывает как это осуществить, а не даёт вам скопипастить код для вставки в свой проект.

Добавлено: 18 Апреля 2018 16:18:14 Добавил: Андрей Ковальчук Нравится 0

Добавить