Allow manually entered text in ui-select

Question

I am using a select box from ui-select. All is working fine, but I want to allow manually entered text and do not want to restrict the user from the values available in the list. If I type in text it filters my list correctly. But when I not click on an element and move on to the next field my text will get discarded.

Any ideas?

Thanks and regards, Alex

I did not want to show my code because I think it is not correct, but it was requested:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">     <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>     <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">         <div ng-bind-html="item.text | highlight: $select.search"></div>     </ui-select-choices> </ui-select> 

The data is stored in formData[field.id].selected. field.id is the number of the current field to display (I am generating my form dynamically). Just assume that it stores an unique int value.

Edit 08.04.2015 My solution: I found out that it seems as if there is no equivalent to a C# combobox. So I went ahead and used two separate fields. It is not what I wanted, but it works for now:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">     <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>     <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">         <div ng-bind-html="item.text | highlight: $select.search"></div>     </ui-select-choices> </ui-select> <?php echo __('Create a new element if value is not in list'); ?> <div class="input-group">     <span class="input-group-addon">         <input type="checkbox" ng-model="disabled[field.id]">     </span>     <input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue" /> </div> 

Answer 1

here is a solution:

HTML -

<ui-select ng-model="superhero.selected">   <ui-select-match placeholder="Select or search a superhero ...">{{$select.selected}}</ui-select-match>   <ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">     <div ng-bind="hero"></div>   </ui-select-choices> </ui-select> 

CONTROLLER -

$scope.getSuperheroes = function(search) {  var newSupes = $scope.superheroes.slice();   if (search && newSupes.indexOf(search) === -1) {     newSupes.unshift(search);   }   return newSupes; } 

Here is the CodePen solution.

Answer 2

I think I found a way to allow the user to create new entries. Use the "on-select" attribute to pass a function that takes $select as a parameter as below:

<ui-select ng-model="person.selected"       theme="select2"       on-select="peopleSel($select)"       tagging       reset-search-input="false"       >      <ui-select-match placeholder="Enter a name...">{{$select.selected.name}}</ui-select-match>     <ui-select-choices repeat="sel in people | filter: {name: $select.search}">     <div ng-bind-html="sel.name | highlight: $select.search"></div>     </ui-select-choices>   </ui-select> 

Then create the function that adds a new entry when the clickTriggeredSelect variable is false:

$scope.peopleSel= function(sel) {   if ( sel.search && ! sel.clickTriggeredSelect ) {     if ( ! sel.selected || sel.selected.name != sel.search ) {       //Search for an existing entry for the given name       var newOne= personSearch( sel.search );        if ( newOne === null ) {         //Create a new entry since one does not exist         newOne= { name: sel.search, email: 'none', country: 'unknown' };         $scope.people.push( newOne );       }       //Make the found or created entry the selected one       sel.selected= newOne;     }   }   sel.search= ''; //optional clearing of search pattern }; 

Note that personSearch definition is not provided here. Also this approach of testing the clickTriggeredSelect can be used to allow the user to unselect the field if a blank entry is the preference.

PVC