Была поставлена задача обеспечить оффлайновый ресурс(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 );
};
}
вроде бы всё просто и понятно, а вот рабочий пример (попробуйте поискать по слову Ломко)
Комментариев 0