Entering in ui-select a value that is not in the list

Question

In this plunk I have a ui-select with a list containing names. I need to allow the user to enter a name from the list or a name that is not in the list.

If I try to enter a name not in the list, ui-select automatically repaces that value with the closest in the list.

Is there a way to a value not in the list?

HTML

      <ui-select ng-model="ctrl.person.selected" theme="bootstrap">
        <ui-select-match>{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
          <div ng-bind-html="item.name | highlight: $select.search"></div>
          <small ng-bind-html="item.email | highlight: $select.search"></small>
        </ui-select-choices>
      </ui-select>

Answer 1

You should be able to use the tagging feature of ui-select to achieve what you want. Please see this Plunkr for a demo - if you type "Gary" into the box then tab out, it will populate with "Gary".

To use the tagging feature, you need to specify the attribute tagging and tagging-label as follows:

<ui-select ng-model="ctrl.person.selected" tagging="ctrl.tagTransform" tagging-label="false">

Because your model is an array of objects (not strings) then you will need to specify a function which will add the "new" item into the model:

vm.tagTransform = function(newTag) {
  var item = {
    name: newTag,
    email: newTag+'@email.com',
    age: 'unknown',
    country: 'unknown'
  };
  return item;
};

Please note that the age and country have been set to "unknown" as we can't determine what they are by just typing the name in. The email also defaults to "[email protected]".

There is also a bug with ui-select where tagging-label needs to be set to false (for tagging to work in single select mode). This unfortunately means that you can't specify a tagging-label function to appear in the dropdown when you are typing (this does work in multiple select mode though).