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.

So you have an input somewhere that when you type it would update the select options? Hard to determine from your limited code here, but if I am guessing correctly you would use ng-change on the input. Having a bigger picture of your controller and additional html would be helpful though. — tbone849, Feb 21 '20 at 19:16
Combo boxes are not native to HTML or AngularJS. They require a third-party library or a custom directive. Is `ui-jq` a custom directive that is integrated with the AngularJS framework? Consider the [ui-select2](https://github.com/angular-ui/ui-select2) directive which plays nicely with the ngModelController, `ng-model`, and validation directives such as `ng-required`. — georgeawg, Feb 21 '20 at 19:28
@AbuSufian The `ng-init` directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of `ngInit`. — georgeawg, Feb 21 '20 at 19:41

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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

How to load model on the fly angularjs Select combo box

1 Answers1

Using <datalist> element as a combo box

Using `<datalist>` element as a combo box