Доработка стилей поиска по карте (searchControl)

191

15 апреля 2018, 23:59

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

Кейс:

Решил немного переделать поиск по яндекс-картам (элемент searchControl). Убрал отображение поисковой выдачи, включил поисковые подсказки и настроил переход на наиболее вероятный результат при клике по поисковой подсказке. Единственный минус -- такая настройка не предполагает предупреждения пользователя в том случае, если ничего найдено не было. Было решено поменять обводку у поля ввода на красную в том случае, если массив найденных результатов окажется пустым.

Вопрос:

Как это сделать наименее костыльным и наболее простым способом?

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

Сейчас я просто обратился к элементу из js по селектору, который подсмотрел в инспекторе. Такой способ работает, он довольно простой, но ненадежный, т.к. при смене версии яндекса все стили посыпятся, а из js обратиться к текущей версии я не могу.

Пример моего решения в песочнице: http://jsbin.com/biqihiq

ЗАРАНЕЕ СПАСИБО!

Answer 1

если проблема в выборе элемента инпут без класса то есть другой способ:

раз

сделать свою обёртку, например в виде div, и искать в ней инпут

var mydiv = mydiv || document.getElementById('mydiv') 
 
let nodearr = mydiv.getElementsByTagName('input') 
 
let inp = null 
 
if (1 === nodearr.length) { 
  inp = nodearr[0] 
} else if (0 === nodearr.length) { 
  console.error('ваще ничё не найдено') 
} else { 
  console.error('откуда блин второй?') 
} 
 
if(inp)inp.style.border = 'solid 3px red'

<div id="mydiv"> 
  <div> 
    <input id="any" value="qwa" /> 
  </div> 
</div>

два

если есть функция обработчик вроде qqf.addEventListener('input',(_e)=>{}) то обратиться к инпуту можно вот так _e.srcElement
_e - Event

var qqf = qqf || document.getElementById('qqf') 
qqf.addEventListener('input',_e=>{ 
  _e.srcElement.style.border = 'solid 3px red' 
  console.log(_e.srcElement.value) 
})

<div> 
  <div> 
    <input id="qqf" value="qwa" /> 
  </div> 
</div>

три

а с чего это яндекс должен обновиться?
вот я вижу тут

https://api-maps.yandex.ru/2.1.62/map.js?callback=ym_map_fallback_url=https___api-maps_yandex_ru_2_1_62_map_js_filter=*&filter=*

что используется апи версии 2.1.62 и если яндекс "обновится", то появится новая ссылка вроде https://api-maps.yandex.ru/2.2/ вы же тем временем будете и дальше работать с https://api-maps.yandex.ru/2.1.62/