Клуб API Карт

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

Пост в архиве.

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

 

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

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

 

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

 

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

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

yandexListResultList = ymaps.templateLayoutFactory.createClass('

<ul class="mapSearchList">' +

     '<li>' +

          '<ul>' +

               '<li>' +

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

               '</li>' +

          '</ul>' +

     '</li>' +

 

'</ul>');

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

     layout: yandexListResultList

}'); 

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

 

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

9 комментариев

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

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

 

 

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.

Дмитрий Сергеев
20 сентября 2018, 23:56
Тоже помучился с этой стилизацией.
Правда в таком случае перестают работать все события. Пришлось писать через jQuery.


var layout = ymaps.templateLayoutFactory.createClass([
    "<ul>",
    "{% for item in state.items %}",
    "<li data-value=\"{{ item.value }}\">{{ item.displayName }}</li>",
    "{% endfor %}",
    "</ul>"
].join(''));


var suggestView = new ymaps.SuggestView($elem.get(0), {
    container: $container.get(0),
    layout: layout
});
Обновлено 20 сентября 2018, 23:59
Егор Холостов
30 ноября 2021, 15:29
dimik, если тут все пишут, что есть проблемы со стилизацией, то дока не нормальная. 
У вас тут профессиональные ниндзя работали.
Вы на вложенность ymaps посмотрите когда sudgest прилетает. Зачем столько оберток, что они дают? 
mapsapi-help
Сотрудник Яндекса6 декабря 2021, 23:07
Егор Холостов,
Здравствуйте.
Если у вас возникли сложности с обработкой ответа саджеста, напишите нашим специалистам технической поддержки: https://tech.yandex.ru/maps/doc/feedback/troubleshooting-docpage/?from=club#feedback

Они обязательно постараются вам помочь.
Егор Холостов,
Полностью согласен