Клуб API Карт

Стилизация панели поиска и подсказок

andrey.misterandrew
14 октября 2014, 00:55

Здравствуйте,

 

Уже не первый день пытаюсь освоить документацию API по яндекс картам.

Стоит задача стилизовать (видоизменить) панель поиска яндекс карты и ее выпадающих при вводе данных подсказок - саджестов. По просту говоря требуется просто подсунуть свой макет. Сама карта яндекса успешно работает на разрабатываемом сайте.

 

Ожидаемый результат:

 

После подключении макетов стилей выпадающего списка подсказок при вводе - ничего не происходит и вид остается нативным, а при успешном подключении макетов стилей к поисковой строке яндекс карт - в свою очередь перестают выпадать подсказки.

Код для выпадающей подсказки (отрывок): 

yandexListResultList = ymaps.templateLayoutFactory.createClass('

<ul class="mapSearchList">' +

     '<li>' +

          '<ul>' +

               '<li>' +

                     // Тут необходимо выводить подсказки при вводе данных в поисковое поле.

               '</li>' +

          '</ul>' +

     '</li>' +

 

'</ul>');

SuggestView('#map input[type="text"], {

     layout: yandexListResultList

}'); 

Использовал при работе следующию документацию: SuggestView . Мне документация показалась сухой и недружелюбной. С трудом понятно, что с чем связано. 

 

Товарищи пожайлуста помогите кто чем может. Желательно если кто - то знает хороший пример со стилизацией поисковой строки и выпадающих подскаок, то пожайлуста дайте ссылку на данный пример. Попробую все проделать по анологии.

5 комментариев
Подписаться на комментарии к посту

Да нормальная документация.

С ней дружить не надо, ее надо читать и мозг включать, а готовые примеры его только атрофируют, потому что не думая, берут и копи-пастят

 

 

SuggestView('#map input[type="text"]

 

1. Покажите, где в документации написано что SuggestView поддерживает jQuery-селекторы?

element *

Тип: HTMLElement | String

 

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

 

2. Если в документации написано "конструктор" значит надо создавать экземпляр через new ymaps.SuggestView

Там есть пример кода

 

var suggestView = new ymaps.SuggestView('suggest');

 

function onLoad (ymaps) {

        var suggestView = new ymaps.SuggestView('suggest',{

            container: $('.my-suggest-container').get(0)

        });

    }

Аналогичная проблема со стилизацией выподающего списка: как создать правильный макет со своими классми? Привязывать стили к ymaps не считаю верным, посколько там указываются стили текущей версии карты. А предыдущие ответы по данной теме лишь описывают как отобразить сам список, в котором по умолчанию указан islands#suggestView.