Jquery AutocompletePro - Плагин Автокомплита

Представляем Вашему вниманию простой, но выполняющий свою основную задачу jquery plugin «AutocompletePro».

К основным его преимуществам можно отнести возможность настройки рендеринга результатов запроса.
Итак, все по порядку…

Создаем объект автокомплита
<input type="text" class="autocomplete" name="users" data-url="users-json.html" size="40"/>
или
<input type="text" class="autocomplete" size="40"/> <!-- Если переданы параметры url и name -->

Добавляем стили
<style type="text/css">
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
  .autocomplete-list {
    border:#aaa solid 1px;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2); 
    position: absolute;
    margin: -2px 0px 0px;
    padding: 0px;
    list-style: none;
    z-index: 1000;
  }
  .autocomplete-list li {
    cursor:pointer;
    padding: 3px; 
  }
  .autocomplete-list li.active {
    background: #3296b6;
    color:#fff;
  }
</style>

Подключаем сам плагин
<script type="text/javascript">
    $(function(){
        $('.autocomplete').autocompletePro({
          'type'      : 'get',     // метод получения данных для автокомплита
          'minLength' : 1,         // минимальное количество символов для отправки запроса
          'url'       : 'users-json.html', // урл на который делать запрос
          'name'      : 'users',   // ключ массива в котором лежат значения автокомплита
          'render': function(obj){ // функция рендеринга результатов
            return '<span data-user-id="'+obj.user_id+'">'+obj.user_name+'</span>';
          }
        }, function(obj) {         // callback функция
             $('#result').html("Вы выбрали пользователя: <b>" + obj.user_name + ' (' + obj.user_id + ')</b>');
           }
        );            
    });
</script>


Как это работает
Созданному нами объекту input.autocomplete добавляется событие keyup, в котором происходит проверка какая клавиша нажата.
— Если нажата кнопка вверх или вниз, то выбранная позиция из появившегося списка очищается от html текста и подставляется в наш input.
— Если нажата клаваши «enter» или Вы кликнули по выбранному элементу списка, то вызывается переданная callback-функция, в которой Вы можете написать все что душа пожелает.
— Во всех остальных случаях нажатия клавиш происходит обращение по адресу указанному в атрибуте data-url если не передан параметр url. В приведенном примере мы просто достаем json-массив из файла users-json.html. В получаемом массиве обязательно должен быть ключ с названием хранящемся в атрибуте «name» нашего input-объекта если не передан параметр name. Именно он указывает нам на массив наших значений автокомплита. В нашем случае — это ключ «users». Массив значений соответствующий этому ключу может быть как ассоциативным, так и нет. Если вы решили использовать НЕассоциативный массив, то передавать функцию рендеринга не нужно. Так же в параметрах плагина Вы можете выбрать метод, с помощью которого будет получаться информация и указать минимальное количество символов для осуществления запроса.

Ах да, еще забыл сказать, что пока поисковая фраза передается через ключ «search» массива GET или POST, в зависимости от выбранного Вами метода.

Скачать jquery plugin «AutocompletePro»     Посмотреть демо

P.S. обновлен до версии 0.3
Понравился пост? Поделись с друзьями:

1 комментарий

avatar
Плагин обновлен до версии 0.3
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.