Плагин при инициализации создает дополнительные HTML-элементы:
До инициализации
<input type="text" id="suggestions"/>
Инициализируем плагин
$('#suggestions').suggestions({ ... });
После инициализации
<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 | Ограничения поиска |
Обзор
Инструменты контента