объединение Текстовое поле и выпадающее меню

Question

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

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

https://jsfiddle.net/techjerk2013/vwpsxhaL/3/

<div id="div3"> 
     <div id="div4" class="row" style="padding-left: 50px"> 
      <div class="col-lg-2 col-xs-6"> 
       <div id="div5" class="dropdown"> 
        <input id="Text1" name="" type="text" style="width: 95px;" /> 
        <button class="btn btn-info dropdown-toggle" type="button" id="Button3" data-toggle="dropdown" aria-expanded="true"> 
         <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnCategory" id="ul3" runat="server"> 
         <asp:Literal runat="server" ID="Literal3"></asp:Literal> 
        </ul> 
       </div> 
      </div> 
      <div class="col-lg-2 col-xs-6"> 
       <div id="div6" class="dropdown"> 
        <button class="btn btn-info dropdown-toggle" type="button" id="Button4" data-toggle="dropdown" aria-expanded="true"> 
         Select Location 
              <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnCategory" id="ul4" runat="server"> 
         <asp:Literal runat="server" ID="Literal4"></asp:Literal> 
        </ul> 
       </div> 
      </div> 
     </div> 

    </div> 

Answer 1

Будет ли JQuery выбран раскрывающийся быть то, что вы ищете? Вы можете добавить класс в раскрывающийся список asp и использовать функцию типа впереди, чтобы выбрать элементы, связанные с ней. Или я неправильно понял вопрос?

http://harvesthq.github.io/chosen/

Answer 2

Посмотрите на DataList тег в HTML.

http://www.w3schools.com/tags/tag_datalist.asp

Это импорт отметить, что это не работает в сафари: http://caniuse.com/#feat=datalist