SuggestView

Важно

Чтобы использовать саджест в JS API:

  1. Получите ключ для саджеста в Кабинете разработчика.
  2. Укажите его при подключении JS API в формате https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш ключ для JS API>&suggest_apikey=<ваш ключ для Suggest API>.

Расширяет ICustomizable, IEventEmitter.

Создаёт выпадающую панель с поисковыми подсказками и прикрепляет к HTML-элементу <input type="text">.

Конструктор | Поля | События | Методы

Конструктор

SuggestView(element[, options])

Параметры:

Параметр

Значение по умолчанию

Описание

element*

Тип: HTMLElement|String

HTML-элемент или его id.

options

Тип: Object

Опции.

options.boundedBy

Тип: Number[][]

Прямоугольная область на карте, где предположительно находится искомый объект. Должна быть задана как массив, например [[30, 40], [50, 50]].

options.container

Тип: HTMLElement

HTML-элемент для размещения верстки панели подсказок. Если не задан, панель подсказок добавляется в родителя HTML-элемента input, для которого создаётся.

options.layout

'islands#suggestView'

Тип: String|ISuggestViewLayout

Макет панели.

В конструктор макета передается объект, содержащий поля:

  • suggestView — ссылка панель с поисковыми подсказками;
  • options — менеджер опций элемента управления (см. suggestView.options);
  • state — менеджер состояния элемента управления (см. suggestView.state).

Макет меняет свой внешний вид на основе состояния и опций элемента панели подсказок. Элемент управления, в свою очередь, реагирует на интерфейсные события макета и меняет значения полей suggestView.state в зависимости от полученных команд.

options.offset

Тип: Number[]

Отступы панели подсказок от её положения по умолчанию (по умолчанию панель подсказок прикрепляется к нижней границе элемента input и имеет одинаковую с ним ширину). Задаётся в виде смещений по горизонтали и вертикали относительно левого нижнего угла элемента input.

options.provider

"yandex#map"

Тип: String|ISuggestProvider

Провайдер поисковых подсказок. Может быть задан объектом, реализующим интерфейс ISuggestProvider, либо стандартным значением "yandex#map".

options.results

5

Тип: Number

Максимальное количество показываемых подсказок.

options.width

Тип: Number

Ширина панели подсказок. По умолчанию совпадает с шириной HTML-элемента input, к которому панель привязана.

options.zIndex

40000

Тип: Number

z-index для dom-элемента панели подсказок.

* Обязательный параметр/опция.

Примеры:

1.

<input type="text" id="suggest"/>
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&load=SuggestView&onload=onLoad"></script>
<script>
function onLoad (ymaps) {
    var suggestView = new ymaps.SuggestView('suggest');
}
</script>

2.

<input type="text" id="suggest"/>
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&load=SuggestView&onload=onLoad"></script>
<script>
function onLoad (ymaps) {
    var suggestView = new ymaps.SuggestView('suggest', {results: 1, offset: [20, 30]});
}
</script>

Поля

Имя

Тип

Описание

events

IEventManager

Менеджер событий.

Унаследовано от IEventEmitter.

options

IOptionManager

Менеджер опций.

Унаследовано от ICustomizable.

state

data.Manager

Состояние панели поисковых подсказок. Имена полей, доступных через метод data.Manager.get:

  • request: String — текущий активный запрос;
  • items: Object[] — массив поисковых подсказок (объектов с полями value и displayName);
  • activeIndex: Number|null — индекс текущей активной подсказки, выделенная пользователем путём наведения мыши или с клавиатуры, или null, если ни одна подсказка не активна;
  • panelClosed: Boolean — признак, была ли панель закрыта пользователем путём нажатия клавиши ESC или выбора одной из подсказок.

События

Имя

Описание

optionschange

Изменение в опциях объекта.

Унаследовано от ICustomizable.

select

Пользователь выбрал одну из поисковых подсказок. Имена полей, доступных через метод Event.get:

  • item — поисковая подсказка, объект с полями displayName и value.

Методы

Имя

Возвращает

Описание

destroy()

Уничтожает панель подсказок.

Описание полей

state

{data.Manager} state

Состояние панели поисковых подсказок. Имена полей, доступных через метод data.Manager.get:

  • request: String — текущий активный запрос;
  • items: Object[] — массив поисковых подсказок (объектов с полями value и displayName);
  • activeIndex: Number|null — индекс текущей активной подсказки, выделенная пользователем путём наведения мыши или с клавиатуры, или null, если ни одна подсказка не активна;
  • panelClosed: Boolean — признак, была ли панель закрыта пользователем путём нажатия клавиши ESC или выбора одной из подсказок.

Описание событий

select

Пользователь выбрал одну из поисковых подсказок. Имена полей, доступных через метод Event.get:

  • item — поисковая подсказка, объект с полями displayName и value.

Описание методов

destroy

{} destroy()

Уничтожает панель подсказок.

Предыдущая
Следующая