AngularJS drop-down with ability to type value

Question

We're using AngularJS v1.5.8 in our application. I am looking for a way to display drop down but also allow to type new value. I've checked this Manually type in a value in a "Select" / Drop-down HTML list? and tried datalist (didn't work in Google Chrome) and also looked at the http://selectize.github.io/selectize.js/ and http://jsfiddle.net/69wP6/4/ I am wondering if something already exists for angularJs so I would not re-invent the wheel.

My current code is this

  <input type="text" name="newRowValue" id="newRowValue" class="form-control" list="rowValues" ng-model="newRowValue" placeholder="@Labels.typeOrSelect"/> <datalist id="rowValues" name ="rowValues" class="form-control" ng-model="rowValue"> <option ng-repeat = "possibleValue in metaData.allPossibleValues| filter: {attributeId: currentMatrixTemplate.rowAttributeId}" value="{{possibleValue.attributeId}}" ng-show="possibleValue.hidden==false || showHidden">{{possibleValue.valueName}} </option> </datalist> 

which doesn't render correctly in Chrome. Any ideas for good and simple implementation of drop down with ability to type new value?

Answer 1

Try this. We use our version of this, but it's very close to this solution.