Плагин при инициализации создает дополнительные HTML-элементы:
Блок кода |
---|
language | xml |
---|
title | До инициализации |
---|
|
<input type="text" id="suggestions"/> |
Блок кода |
---|
language | js |
---|
title | Инициализируем плагин |
---|
|
$('#suggestions').suggestions({ ... }); |
Блок кода |
---|
language | xml |
---|
title | После инициализации |
---|
|
<input type="text" id="suggestions" class="suggestions-input" />
<div class="suggestions-wrapper">
<div class="suggestions-suggestions">
<div class="suggestions-hint">Выберите вариант ниже или продолжите ввод</div>
<div class="suggestions-suggestion suggestions-selected">...</div>
<div class="suggestions-suggestion">...</div>
<div class="suggestions-suggestion">...</div>
</div>
<i class="suggestions-preloader"></i>
<ul class="suggestions-constraints"></ul>
</div> |
Внешний вид элементов настраивается CSS-классами:
Класс | Описание |
---|
.suggestions-suggestions | Список подсказок |
.suggestions-suggestion | Элемент списка подсказок |
.suggestions-selected | Выбранный элемент списка подсказок |
.suggestions-suggestions strong | Подсветка части элемента списка, совпадающей с запросом |
.suggestions-hint | Поясняющий текст, который показывается в выпадающем списке над подсказками |
.suggestions-preloader | Крутящийся индикатор (показывается во время ожидания ответа от сервера) |
.suggestions-constraints | Ограничения поиска |