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>
I've forked the ui-select project to allow this functionality through the allow-free-text attribute
Here is the plnker
Until my pull request is accepted by the angular-ui team, you can get the ui-select build that includes my patch on my own repo
I use
keyup
to add a new option represents the text entered. With this approach, if user pressenter
, they can select what they have input so far (the default active item is the first item).This supports both cases when the data list contains plain text or object (attribute
value-prop
is required).Directive:
HTML:
here is a solution:
HTML -
CONTROLLER -
Here is the CodePen solution.
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:
Then create the function that adds a new entry when the clickTriggeredSelect variable is false:
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
You could use the tagging attribute as explained in the documentation: https://github.com/angular-ui/ui-select/wiki/ui-select