CODEWITHSUNDEEP
htmlangularjscomboboxhtml-select
Developer
Developer

Reputation: 99

Input text Field inside `<select>` tag

I am creating a dropdown with AngularJS.
here is the code..

<div class="col-md-9">
  <input type="text" placeholder="Enter Module" list="names"
         ng-model="data.Name" />
  <select id="names" class="form-control" ng-model="data.Name"
          ng-change="SetCategory(data.Name)" name="name">
    <option value='' disabled selected>------------- select an option ----------</option>
    <option ng-repeat="e in BrData | filter:data.Name "
            value="{{e.Name}}">{{e.Price}}</option>
  </select>
</div>

NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag. But Input tag can't nested in select tag.What should I do?

Upvotes: 2

Views: 4022

Answers (4)

georgeawg
georgeawg

Reputation: 48968

Dealing with the <select> nightmare

From the Docs:

<select> Element Technical summary1

Permitted content: Zero or more <option> or <optgroup> elements.

Tag omission: None, both the starting and ending tag are mandatory.

Permitted parents: any element that accepts phrasing content

The short answer is that <input> elements can not be placed inside <select> elements.

<datalist> Element2

The datalist element is intended to provide a better mechanism for this concept. 

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

For more information, see

Upvotes: 1

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

The way I see it, there are three options here.

Option One - Input outside the dropdown

Get the input outside the dropdown, and filter the values based on that value from the outside. I know that this is not your intended functionality exactly, but it would save you some trouble.

Option Two - Use some kind of third party dropdown library

As Mohd mentioned https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too

Option three - Create something of your own

It need not even be using <select> tag. This is by far the most difficult, but also the most customizable and suitable for individual needs. The select tag will not be used as it does not support input inside of it, so some high end css will need to be used, as well as some backwards compatibility multiple browser testing that the already made libraries have already done.

Upvotes: 2

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7969

Use select2 as a dynamic option instead of HTML select option: here is link for select using js:

https://select2.org/tagging

Upvotes: -2

Mohd. Abdul Sohail
Mohd. Abdul Sohail

Reputation: 92

You can use typeahead from UI Bootstrap: https://angular-ui.github.io/bootstrap/#!#typeahead

Or if you need more advanced features along with search like multi-select, select all, deselect all, disable options, keyboard controls and much more try this: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main

Upvotes: 2

Related Questions