Редактируемый Combobox с кнопкой для отображения всплывающего окна

Question

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

Давайте посмотрим, как это выглядит

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

Я также обмена код и скрипку

<div class="grid-33"> 
       <label class="b-control"> 
       <span class="b-control__label">Source:</span> 
       <span class="b-control__editable"> 
        <select class="b-control__select"> 
        <option value=""></option> 
        <option value="">...</option> 
        <option value="">...</option> 
        <option value="">...</option> 
        </select> 
        <a class="b-control__edit js-control__edit js-popupLink" href="#js-editSelect">...</a> 
       </span> 
       </label> 
      </div> 

https://jsfiddle.net/mahendrakawde/o4j3x495/

играть. Помогите мне иметь редактируемый select с этим css и js там в скрипке.

Answer 1

mate Я пробовал что-то с помощью CSS, но я не совсем уверен в том, какой подход я использовал, если он работает для вас, тогда очень хорошо. пожалуйста, посмотрите на fiddle

<input class="edit_text" type="text"/> 

и соответствующий CSS

.edit_text{ 
    cursor: pointer; 
    display: block; 
    height: 34px; 
    position: absolute; 
    top: 35px; 
    width: 246px; 
    z-index: 999; 
} 

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