На странице имеется input[type=text] и выпадающее меню, которое его перекрывает при наведении на главное меню, и все работает замечательно: у меню z-index выше и оно перекрывает весь блок, в котором расположен инпут. Проблема возникает, если в инпут ввести значение. Появляется стандартный список с ранее введенными значениями и он не прячется под меню.
Варианты решения:
1. Запретить браузеру выводить автокомплит
2. При помощи хитрого CSS-селектора установить z-index для выпадающего списка
3. При помощи JS прятать список на время появления выпадающего меню
Кто сталкивался? Помогите с вариантами 2 и 3. Гугл выдает кучу мусора не по моей теме про js-плагины.
2. При помощи CSS задать z-index для выпадающего списка, который выводится браузером
3. При помощи JS спрятать отображаемый в данный момент выпадающий список
@timokhin
поиграйте с z-index для input[type="select"] если не получается, то,
используйте тогда brianreavis.github.io/selectize.js типа такого решения.
Насчет 3-го пункта: на JS напишите примитивный обработчик if else для отображения, которые реагируют на $('element.class').on("change") или click.
Именно. Тут еще такой момент — а зачем его скрывать именно таким образом? Попахивает извращением, т.к. автокомплит есть активный элемент интерфейса и он должен быть на переднем плане.
@Mew Я бы с вами согласился, если бы на переднем плане был и автокомплит и инпут, к которому он относится, но инпут перекрывается блоком с подменю, поверх остается только сам список. К тому же, меню тоже активный элементы в рамках сайта и он должен быть поверх всего остального)
Простой
