CODEWITHSUNDEEP
javascriptjqueryangularjsselect
panagulis72
panagulis72

Reputation: 2169

Insert Input text in a Select as option

I'm doing a list, and the user can filter it with a input text. Now, the field is separated from the select, and I would set the input as an option, like in this image image

This is my CODE. Thank you very much!

    <div class="row">
  <div class="col-md-2">
    Search: <input ng-model="query"> 
  </div>
  <div class="col-md-10">
    <!--Body content-->

    <select class="phones">
      <option ng-repeat="phone in phones.data | filter:query">
        <span>{{phone.name}}</span>  
        <span>{{phone.age}}</span>
      </option>
    </select>

  </div>
</div>

Upvotes: 1

Views: 3601

Answers (1)

Culme
Culme

Reputation: 1095

It is a somewhat complex task, I recommend you use an existing component/library unless your requirements are very, very special.

I can recommend Chosen, which will help you create dropdown menus with filtering through textbox:

https://github.com/harvesthq/chosen

Regarding your requirement from the comments, the need to search not only from the beginning of a word, there is an option in Chosen to achieve that - it's called "search_contains". Refer to Chosen documentation for details:

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

Also see this StackOverflow question regarding "search_contains":

Changing search behavior in jquery plugin Chosen

Upvotes: 1

Related Questions