Поисковая строка вне карты
В SuggestView, который можно использовать для создания поисковых подсказок на странице. Такие поисковые подсказки используют ту же базу данных, что и подсказки при поиске на карте, либо информацию из заданного самостоятельно провайдера.
Важно
Чтобы использовать саджест в JS API:
- Получите ключ для саджеста в Кабинете разработчика.
- Укажите его при подключении JS API в формате
https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш ключ для JS API>&suggest_apikey=<ваш ключ для Suggest API>
.
Поисковая подсказка с данным Яндекс Карт
Чтобы добавить на страницу поисковую подсказку нужно:
-
Добавить элемент
input
с типомtext
на страницу: -
<input type="text" id="suggest">
-
После загрузки API, создать элемент SuggestView и прикрепить его к HTML-элементу:
-
ymaps.ready(init); function init() { var suggestView1 = new ymaps.SuggestView('suggest'); }
При вводе текста в панель будут предлагаться поисковые подсказки.
Поисковая подсказка со своими данными
Чтобы предоставить пользователям поиск по заранее заданным данным, нужно:
-
Создать массив, по которому будет производиться поиск:
var arr = [ "Москва", "Сочи", "Новгород" ];
-
Создать функцию, реализующую поиск по массиву:
var find = function (arr, find) { return arr.filter(function (value) { return (value + "").toLowerCase().indexOf(find.toLowerCase()) != -1; }); };
-
Создать провайдера поиска:
var myProvider = { suggest: function (request, options) { var res = find(arr, request), arrayResult = [], results = Math.min(options.results, res.length); for (var i = 0; i < results; i++) { arrayResult.push({displayName: res[i], value: res[i]}) } return ymaps.vow.resolve(arrayResult); } }
-
Создать элемент SuggestView, использующий провайдер поиска:
var suggestView = new ymaps.SuggestView('suggest', {provider: myProvider, results: 3});