MVC. Поиск на карте средствами API Яндекс.Карт

Итак, у нас есть карта с кучей объектов, все работает, и все вроде бы прекрасно. Но объектов становится все больше, и ориентироваться в них все сложнее. Поэтому юзеру рано или поздно захочется воспользоваться хотя бы простеньким поиском. Вот и попробуем сделать простенький поиск по названию объекта. Для этого нам нужно окошко для ввода поискового слова, кнопка для запуска поиска и контейнер для списка найденных объектов (у нас это будет просто DropDownList). При выборе в списке найденных объектов какого-либо элемента на карте будет отображаться соответствующий балун. Все это будет сделано на чистом jQuery с использованием API YandexMaps.

Для начала создадим необходимые контролы (листинг 1).

Листинг 1 – Контролы для поиска

    <table>

        <tr>

            <td>

                @Html.Editor("findWord")

            </td>

            <td>

                <input type="button" value="Find" id="findButton" />

            </td>

        </tr>

        <tr>

            <td>

                @Html.DropDownList("ObjName", Enumerable.Empty<SelectListItem>())

            </td>

            <td>

            </td>

        </tr>

    </table>

Теперь пишем функцию поиска объектов по введенному слову (листинг 2).

Листинг 2 – jQuery – функция поиска

        // Функция для поиска объектов среди имеющихся на карте

        // по названию объекта и добавления их в список

        function getFindList() {

           

            // поисковая стркоа

            var searchName = document.getElementById('findWord').value.replace(new RegExp(' ', 'i'), '.+');

            // "регулярка" для поиска

            re = new RegExp(searchName, 'i');

            // произведем поиск

            var result = group["new"].filter(function (overlay) {

                var i = overlay.name.search(re);

                if (i != -1) {

                    return overlay.name;

                }

             });

            // ищем список

            var findChild = $('#ObjName');

            findChild.empty();

            // заполняем

            $.each(result, function (index, resultItem) {

                findChild.append($('<option/>', {

                    value: resultItem.name,

                    text: resultItem.name

                }));

            });

        };

Остановимся подробнее на этой функции. Сначала мы получаем наше искомое слово, попутно избавляясь от лишним пробелов в нем. Далее составляем регулярное выражение, по которому будет происходить поиск (подробнее ознакомиться с регулярными выражениями можно тут, ну и Google в помощь). Далее, используя полученную «регулярку», осуществляем поиск методом API Яндекс.Карт. В переменной result у нас будут объекты, названия которых удовлетворяет нашей поисковой строке. Далее уже знакомый код по добавлению найденных значений в выпадающий список. Осталось вызвать эту функцию при клике по кнопке поиска (листинг 3).

Листинг 3 – Вызов поиска при клике по кнопке

        $('#findButton').click(function () {

            getFindList();

        });

Мы получили список объектов, которые удовлетворяют поисковой строке (рисунок 1).

Рисунок 1 – Список найденных объектов

Идем дальше. Нам нужно снова осуществить поиск на карте, но теперь уже по найденным названиям объектов. И теперь совпадение имен должно быть стопроцентным, т.е. никаких регулярных выражений. И, кроме того, необходимо показывать соответствующий балун (листинг 4).

Листинг 4 – Отображение балуна найденного объекта

        // Функция для отображения объекта

        // из списка найденных

        function showObject() {

            var findChild = $('#ObjName');

            var searchName = findChild.val();

            var result = group["new"].filter(function (overlay) {

                return overlay.name == searchName; // Точное совпадение

            });

            if (result[0] != null) {

                result[0].openBalloon();

            }

        };

Думаю, тут все понятно. Осталось вызвать эту функцию при выборе элемента списка (листинг 5).

Листинг 5 – Отображение балуна объекта при выборе его в списке

        $('#ObjName').change(function () {

            showObject();

        });

Собственно, все! Удачи!