Поисковая строка вне карты

В SuggestView, который можно использовать для создания поисковых подсказок на странице. Такие поисковые подсказки используют ту же базу данных, что и подсказки при поиске на карте, либо информацию из заданного самостоятельно провайдера.

Важно

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

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

Чтобы добавить на страницу поисковую подсказку нужно:

  1. Добавить элемент input с типом text на страницу:

  2. <input type="text" id="suggest">
    
  3. Подключить для страницы JSAPI карт.

  4. После загрузки API, создать элемент SuggestView и прикрепить его к HTML-элементу:

  5. ymaps.ready(init);
    
    function init() {
    var suggestView1 = new ymaps.SuggestView('suggest');
    }
    
    

При вводе текста в панель будут предлагаться поисковые подсказки.

Поисковая подсказка со своими данными

Чтобы предоставить пользователям поиск по заранее заданным данным, нужно:

  1. Создать массив, по которому будет производиться поиск:

    var arr = [
    "Москва",
    "Сочи",
    "Новгород"
    ];
    
  2. Создать функцию, реализующую поиск по массиву:

    var find = function (arr, find) {
    return arr.filter(function (value) {
    return (value + "").toLowerCase().indexOf(find.toLowerCase()) != -1;
    });
    };
    
  3. Создать провайдера поиска:

    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);
    }
    }
    
  4. Создать элемент SuggestView, использующий провайдер поиска:

    var suggestView = new ymaps.SuggestView('suggest', {provider: myProvider, results: 3});
    

Примеры в песочнице