Случайный альбом
KUBANA-2011
Некультурный отдых - KUBANA-2011
Изображений: 67
Flash Point 2011
Некультурный отдых - Flash Point 2011
Изображений: 77
Косово поле-2011
Некультурный отдых - Косово поле-2011
Изображений: 214
Меточки:
Нацарапано:  09.11.2009
Категория: Работа
Метки новости:
На суд достопочтеннейшей публики выностися плагин для jQuery, без всякого мошенничества выполняющий всякого рода автозаполнения с настрйками.

Описание

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

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

jquery.autocomplete-1.11.zip



Установка

Процедура установки достаточно обыденна: просто подключите js-файл после jQuery.
Квак!

<script type="text/javascript" src="jquery.js"></ script><script type="text/javascript" src=" jquery.autocomplete.js"></script>


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

Присобачим автозаполнение к банальному input’у:

Квак!

<input type="text" name="q" id="query" />


Далее пробуждается от векового сна [toolfaq]инициализируется[/toolfaq] объект автозаполнения, надобно знать, что это должно происходить после загрузки DOM-модели, иначе грязный старикашка IE 6 может впасть в маразм.

Квак!

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


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

Квак!

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


Вкл/откл автозаполнение, а снова инициализировать параметры можно через функции объекта:

Квак!

var ac = $('#query').autocomplete();
ac.disable();
ac.enable();
ac.setOptons();


Стилизация

Скриптик создаёт следующий фрагментик разметочки:

Квак!
<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>


Пример CSS:

Квак!

.autocomplete-w1 
.autocomplete 
.autocomplete .selected {
background:#F0F0F0; 
}
.autocomplete div {
padding:2px 5px; 
white-space:nowrap; 
overflow:hidden; 
}
.autocomplete strong {
font-weight:normal; 
color:#3399FF; 
}


Описание
Автозаполнение для js Prototype

Звиздец рекомендует поделиться ссылкой с камрадами и откомментить эту заметку:
для печатиПечатай!  
 
ZviZdeZ.ru
Придет серенький Фенрир и укусит нас за мир

2009-2011©