How to load model on the fly angularjs Select combo box

Question

At the moment I have a combo box. In my appservice, I query my database and grab top ten.

<select id="StationSelectionCombobox"
        name="Country"
        ng-options="s.amenityUID as s.amenityName for s in  vm.nearbyStations"
        ng-model="vm.stations[$index].amenityUID"
        ng-change="vm.updateStation($index)"
        class="form-control bs-select drop-down"
        ui-jq="selectpicker">
    <option value="">@L("NotSelected")</option>
</select>

I am looking to update the model on the fly as characters are entered. May I ask how abouts should I do that, or if this is even capable with this control.

Answer 1

Combo boxes are not native to HTML4 or AngularJS. They require a third-party library or a custom directive.

Consider using these libraries:

• ui-select2 directive which plays nicely with the ngModelController, ng-model, and validation directives such as ng-required.
• ui-select AngularJS-native version of Select2 and Selectize.

---

Using <datalist> element as a combo box

HTML5 has the <datalist> element which can act as a combobox:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice"
       name="ice-cream-choice" ng-model="flavorChoice" />    
<datalist id="ice-cream-flavors">              
    <option ng-repeat="choice in choicesArr | filter : flavorChoice | limitTo : 5"
            ng-value="choice">
    </option>
</datalist>

For more information, see

• MDN HTML Reference - <datalist> element