Совсем недавно потребовалось сделать на сайте функционал определения региона и города посетителя. Было 2 варианта 1-й использовать базу КЛАДР, 2-й использовать API Яндекса или Google. Сначала я решил пойти п пути первому, но при запросе «Москва», у меня было 20 результатов, и на первом месте оказывались какие то поселки, а нужная нам «Москва» была где то по середине. Для корректной работы пришлось бы добавлять в базу какие то дополнительные данные, такие как степень важности и тд. Но это бы затянулось на долго так как база КЛАДР весит, в облегченном варианте, около 7 Мб.

Потому я решил пойти по второму пути и выбрал Яндекс. Яндекс выбрал лишь потому что мне их карты больше нравятся 🙂 Так как-то сих пор дела с его API толком не имел, решил погуглить. Но к сожалению мало чего нашел толкового.

Потому решил написать сам, в конце концов получилась небольшая библиотека. Библиотека сейчас делает совсем немного:

  • ищет города по названию;
  • формирует список из десяти последних результатов, если их больше;
  • помещает название региона в атрибут data-region, название города или населенного пункта в data-city, ну а сам текст результата выводится как сформирует Яндекс AddressLine;
  • каждая строка результата имеет клас так что привязать сборку информации к ним не составит труда;

Собственно мне этого функционала и нужно было добиться.

В дальнейшем планирую ее доработать, как только разберусь с делами.

От использования jQuery в ней я отказался — мало ли, может кто то не любит использовать jQuery.

Как же использовать библиотеку?

  • Для начала качаем этот файл yandex-search.js
  • Подключаем его в head нашей страницы.
  • Создаем на странице список для результатов поиска вот такой: <ul id=»viv-result»></ul>.
  • Создаем экземпляр класса: var vivSearch = new vivYandex({result: ‘viv-result’}) где в параметре result указываем id нашего списка для результатов.
  • Для того чтоб поиска начал работать нужно вызвать метод search и передать ему 2 параметра Страну и Город который мы ищем. Например: vivSearch.search(‘Россия’, ‘питер’).
  • Смотрим как в списке viv-result появилось значение «Санкт-Петербург» — это то что мы получили от Яндекса по запросу «питер».

Для более удобного пользования библиотекой прилагаю вариант который работает у меня. Для этого нужно создать еще строку для ввода запроса <input id=»viv-search» type=»text» />. И сделать вызов поиска при каждом изменении значения в этом поле.

Теперь у нас вызов поиска изменится на такой:

var vivSearch = new vivYandex({result: 'viv-result'});
$('#viv-search').on('keyup', function(){
     vivSearch.search('Россия', $(this).val());
});

Вот полный код примера:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="https://www.varfolomejev.com/wp-content/uploads/2014/08/yandex-search1.js"></script>
    </head>
    <body>
        <input id="viv-search" type="text" />
        <ul id="viv-result"></ul>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                window.vivSearch = new vivYandex({result: 'viv-result'});
                $('#viv-search').on('keyup', function(){
                    vivSearch.search('Россия', $(this).val());
                });
            });
        </script>
    </body>
</html>

Посмотреть пример и скачать его можно по ссылке viv-yansex-search.html.