jQuery AutoComplete


    Хочу представить вашему вниманию очередной плагин для jQuery, на этот раз автозаполнение со своим преферансом.



    Описание




    Первое достоинство плагина — это производительность. Все результаты запросов кэшируются, и в следующий раз подбираются из кэша, а не с сервера.
    Кроме того, у него есть несколько уникальных функций, такие как использование разделителей, поиск по нескольким словам, возможность использовать компонент автономно, без отправки запроса на сервер.

    Работает в IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, Chrome 1.0+



    Установка


    Процедура установки достаточно обыденна: просто подключите js-файл после jQuery.
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.js"></script>


    * This source code was highlighted with Source Code Highlighter.


    Использование


    Добавим автозаполнение к стандартному input’у:
    <input type="text" name="q" id="query" />

    * This source code was highlighted with Source Code Highlighter.


    Далее инициализируется объект автозаполнения, убедитесь, что это происходит после загрузки DOM-модели, иначе могут быть глюки с IE.
    $('#query').autocomplete({
        serviceUrl: 'service/autocomplete.ashx', // Страница для обработки запросов автозаполнения
        minChars: 2, // Минимальная длина запроса для срабатывания автозаполнения
        delimiter: /(,|;)\s*/, // Разделитель для нескольких запросов, символ или регулярное выражение
        maxHeight: 400, // Максимальная высота списка подсказок, в пикселях
        width: 300, // Ширина списка
        zIndex: 9999, // z-index списка
        deferRequestBy: 0, // Задержка запроса (мсек), на случай, если мы не хотим слать миллион запросов, пока пользователь печатает. Я обычно ставлю 300.
        params: { country: 'Yes'}, // Дополнительные параметры
        onSelect: function(data, value){ }, // Callback функция, срабатывающая на выбор одного из предложенных вариантов,
        lookup: ['January', 'February', 'March'] // Список вариантов для локального автозаполнения
    });


    * This source code was highlighted with Source Code Highlighter.


    Страница, указанная в serviceUrl получает GET запрос, а в качестве ответа должна отправить данные в формате JSON:

    {
    query:'Li', // Оригинальный запрос
    suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], // Список подсказок
    data:['LR','LY','LI','LT'] // Необязательный параметр, список ключей вариантов подсказок. Используется в callback функции
    }


    * This source code was highlighted with Source Code Highlighter.


    Включить/выключить автозаполнение, а также заново инициализировать параметры можно в любой момент, через функции объекта:
    var ac = $('#query').autocomplete({ /*параметры*/ });
    ac.disable();
    ac.enable();
    ac.setOptons({ zIndex: 1001 });


    * This source code was highlighted with Source Code Highlighter.


    Стилизация


    Скрип создаёт следующий фрагмент разметки:
    <div class="autocomplete-w1">
     <div style="width:299px;" id="Autocomplete_1240430421731" class="autocomplete">
      <div><strong>Li</strong>beria</div>
      <div><strong>Li</strong>byan Arab Jamahiriya</div>
      <div><strong>Li</strong>echtenstein</div>
      <div class="selected"><strong>Li</strong>thuania</div>
     </div>
    </div>


    * This source code was highlighted with Source Code Highlighter.


    Вот пример CSS стилей:
    .autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
    .autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden; }
    .autocomplete .selected { background:#F0F0F0; }
    .autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
    .autocomplete strong { font-weight:normal; color:#3399FF; }


    * This source code was highlighted with Source Code Highlighter.


    Ссылки


    Описание: www.devbridge.com/projects/autocomplete/jquery
    Скачать плагин можно здесь: www.devbridge.com/projects/autocomplete/jquery/#download
    Версия для Js Prototype: www.devbridge.com/projects/autocomplete/#download

    UPD

    Аналогичные решения для других фрэймфорков


    MooTools: www.ajaxdaddy.com/mootools-autocomplete.html (спасибо Zyava)

    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 36

      +7
      Хорошо!
      Еще порадовало, что Гаити, таки, наши! :))

        +2
        У нас полоски уже :))
        0
        Спасибо, попробуем.
          0
          То что надо! Огромное спасибо
            0
            Отличная вещь, большое, большое спасибо!
              0
              показывает вхождение внутри слова, но ищет только с начала
              так задумано было?
                0
                Тоже заметил
                0
                Судя по коду в локальных данных только с начала, а вот по запросу от сервера — зависит исключительно от серверного скрипта.
                0
                Спс, щас потестим =)
                  0
                  А как кеширование реализовывается?
                    0
                    Результат запроса заносится в this.cachedResponse. Перед новым запросом проверяется был ли такой запрос. Если был — берется полученный раньше список
                      0
                      А при рефреше страницы кеш останется или потрется?
                        0
                        Ну как я понял, если только в переменную js, не используя куки, то после рефреша кеш будет чистый.
                          –3
                          Не совсем относится к теме, но все же — кеширование будет использоваться только для конкретного пользователя, что тоже не совсем гут. Если уж и говорить о кешировании, то оно должно быть для всех.
                          Но в целом — красиво, куда-нибудь обязательно прикручу, спасибо!
                            0
                            Как вы себе представляете кеширование в js(клиент-сайд scripting language) более чем для одного пользователя? Ну а так — конечно было бы неплохо:)
                              0
                              Ну такое кэширование можно сделать на стороне сервера. Но это уже целиком и полностью задача сервера, к плагину прямого отношения не имеющая.
                                0
                                какой смысл кэшировать запросы на сервере если потом всеравно придется брать запросы с сервера? через пару дней такого кеша на сервере кеша будет больше чем самих данных и работать Ваш кеш будет медленней чем обычная выборка
                                  0
                                  Ну во-первых это не мой кеш :)
                                  Во-вторых, кэшировать тоже надо с умом — удалять старые запросы либо по факту накопления, либо по времени хранения, либо по другому какому-то алгоритму — это вопрос вообще отдельный.
                                  В-третьих обычная выборка далеко не всегда бывает обычной. Мне довелось работать с проектом, где для получения результатов поиска приходилось джойнить пять-шесть таблиц по нескольку сот тысяч записей в каждой — тут практически любое кэширование даёт очень серьёзный выигрыш в производительности.
                                    0
                                    дык надо устраивать кеш на сервере не по условию клиентской выборки, а именно исходя из всех данных на сервере, просто человек изначально имел ввиду все запросы клиента хранить на сервере, правильней будет заранее подготовиться к запросам для подсказок
                                    0
                                    Смысл есть, если данные собираются из нескольких источников. В таком плане кэшем может являться таблица в бд, забиваемая подготовленными данными. Да и организовать кэширование можно по-разному, например, группировать запросы.
                                      0
                                      Выше предлагали этот кеш организовывать по клиентским запросам, это глупо, либо сразу сделать табличку с кешем, либо не выделываться
                                    0
                                    Ну дык это уже дело каждого, с плагином всё ок! :)
                            0
                            Да кстати, тоже стало интересно. Кешируется в js или куки? Говоря по другому, после обновления странички кеш будет чистый или нет?
                              +4
                              Я сейчас пользуюсь — bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
                              В принципе, они похожи по основным функциям, правда тот, что в топике весит поменьше.
                                0
                                Это проверенный временем и неплохо развитый плагин. Тоже его использую.
                                0
                                начал разбираться с плагином…
                                может я дурак, но каким должна быть autocomplete.php например…

                                вот такая ни в какую не дополняет
                                <?php
                                $test=array(query=>$_GET['q'],suggestions=>array('Antonio'));
                                echo json_encode($test);
                                ?>

                                сорри за возможный оффтоп…
                                  0
                                  все. туплю. :)
                                  если кто-то тупит так же, то скажу, что я просто невнимательно прочитал документацию на офф сайте. lookup и serviceUrl взаимоисключаемы.
                                  0
                                  Добавьте пожалуйста ссылку на аналогичный плагин для Mootools: www.ajaxdaddy.com/mootools-autocomplete.html раз Вы добавили ссылку на плагин для Prototype, может велосипедистов будет поменьше. Мне на прошлой неделе пришлось доделывать за индусами модификации плагина к SocialEngine — так вот эти умники для того, чтобы добавить автокомплит к двум инпутам подключили jquery + описанный Вами плагин. А что в SocialEngine уже подключен Mootools и соответственно получался конфликт с jQuery (сыпались ошибки в консоли файрбага, под ие не уверен что вообще работало), их нисколько не смущало.
                                    0
                                    Отлично! Как раз искал решение с разделителями.
                                    Было бы еще классно реализовать функционал с уникальными вхожденями.
                                    Т.е., есть я уже введен, например «Afghanistan», то после разделителя, при следующем выборе, в списке выдачи его уже нет.
                                      0
                                      Чем ваше решение лучше стандартного jquery плагина autocomplete?
                                        0
                                        Вы имеете ввиду plugins.jquery.com/project/ac?
                                        Если да, то там как минимум нет поддержки разделителей, т.е. поиска «February, Ma...»
                                          0
                                          Нет, я имею в виду это: docs.jquery.com/Plugins/Autocomplete

                                          И вот он как раз умеет разделители.
                                            0
                                            К сожалению, я не знал про это плагин. Хотя он всё равно не стандартный, а такой же самописный, как и этот.
                                            Уделил несколько минут, из преимуществ моего нашёл регулярные выражения для разделителя и меньший размер js-файла.

                                            А вообще, описанный мою плагин первоначально разрабатывался для Js Prototype, и потом был портирован на jQuery, когда компания сменила фрэймворк, поэтому претензий на оригинальность дополнения нет.
                                        0
                                        Плагин приятный, но:
                                        1) почему подсвечиваются буквы(части слов) в середине слова, но по ним не ищется(было выше)
                                        2) отказывается работать в 4-ой версии Google Chrome.
                                          0
                                          Народ как при локальном поиске дополнитьельно к lookup передать lfyyst данные чтобы обратно возвращало в параметре val?

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

                                          Самое читаемое