Jquery JqueryUI autocomplete, пример настройки автодополнения с произвольным словарём

Была поставлена задача обеспечить оффлайновый ресурс(CD диск) возможностью поиска по используемой в онлайн базе данных.

Самым простым и удобным решением оказалось выгрузить базу с нужными ключами в JS файл и использовать полученный словарь прямо на странице совместно с jqueryui.autocomplete

Для этого нужно настранице разместить форму с полем для ввода ключевых слов и полем для отображения полученной ссылки, затем подключить библиотеку JqueryUI  и настроить конструктор autocomplete на то, чтобы он правильно обрабатывал формат моего словаря. У меня получилась примерно вот такая форма:

<div id="ac-search">Поиск:
      <input id="search" />
      <p id="search-href"/>
</div>

На этой форме я буду использовать id="search" для того чтобы подключить к этому полю выпадающий список и параграф id="search-href" для вывода результатов

В моём случае формат словаря определялся Json ответом CMS сайта:

{"polish": {"peoples": {"row": polish_peoples = [
    [1, "Джугашвили Иосиф Виссарионович (1878—1953)"],
    [2, "Путин Владимир Владимирович (1952—)"],
    [3, "Романов Николай Александрович (1894—1917)"],
]}}}

Вот пример как использовать это совместно с Ajax+Json

$.get("/app.py",{plugins:"peoples2json",format:"json",short_name:"peoples"},function(data){
// запрос к сайту в надежде получить JSON объект
if(data.polish.peoples){
// если получен нужный объект то отыскиваем поле ввода #search и конструкируем из него autocomplete
$( "#search" ).autocomplete({
             minLength: 0,
// в качестве словаря по которому будет производиться поиск передаю массив заголовков и номеров страниц
                  source: data.polish.peoples.row,
// описываю свой обработчик события когда пользователь выбирает какое либо значение из всплывшего списка
                  select: function( event, ui ) {
// код обработчика знает какой элемент моего словаря выбрал посетитель, а я зная структуру элемента
// формирую нужный результат и вставляю полученную ссылку в поле #search-href
// 1ой[0] элемент моего массива содержит ID страницы,
//а 2ой[1] элемент это заголовок, импользуя эти данные я формирую ссылку на новую вкладку и вславляю в туда куда нужно
                   $( "#search-href" ).html( "<a target='_blank' href='/blog/"+ui.item[0]+".html'>"+ui.item[1]+"</a>" );
                        return false;
                  }
             }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
// определение этой функции необходимо потому что объект autocomplete
// не знает из каких полей моего словаря формировать ссылки в всплываюшем списке
// то-есть при условии нахождения ключевого слова набранного посетителем
// для каждой подходящей строки моего словаря будет вызывать функция _renderItem
// а результат этой функции будет формировать выпадающей список
              return $( "<li>" ).append( "<a>" + item[1] + "</a>" ).appendTo( ul );
                   };
             }
    },"json");

Для оффлайн версии всё немного проще, для этого нужно JSON результат сохранить в JS файле на сервере, я его немного упростил и у меня получилось вот так

peoples = [
    [1, "Джугашвили Иосиф Виссарионович (1878—1953)"],
    [2, "Путин Владимир Владимирович (1952—...)"],
    [3, "Романов Николай Александрович (1894—1917)"],
];

затем нужно подключить этот файл на страницу так чтобы внутри пространства имён JS была доступна переменная peoples, а затем активировать jqueryui.autocomplete вот так:

 $( "#search" ).autocomplete({
             minLength: 0,
// использую peoples из подключенного JS файла
                  source: peoples,
                  select: function( event, ui ) {
                   $( "#search-href" ).html( "<a target='_blank' href='/blog/"+ui.item[0]+".html'>"+ui.item[1]+"</a>" );
// подсветка результата эффектом highlight
$( "#search-href" ).effect("highlight", {}, 3000);
                        return false;
                  }
             }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
              return $( "<li>" ).append( "<a>" + item[1] + "</a>" ).appendTo( ul );
                   };
             }

вроде бы всё просто и понятно, а вот рабочий пример (попробуйте поискать по слову Ломко)

похожие страницы

  1. JQuery примеры использования
  2. Таблица значений для настройки framebuffer
  3. jQuery: простые примеры
  4. jQuery, сериализация данных при обработке формы
  5. jQuery, создание плагина на примере слайдера