How to get value which typed in ui-select search box?

Question

I'm using ui-select (https://github.com/angular-ui/ui-select).

ui-select support us to Search, Select, and Multi-select. But how can I get the value users typed in ui-select search box? I want to display an error message if the value users typed is not correct.

Example: In this plunker below with Select2 theme, when the user type: 'asdasd' (this text does not match with any results) I want display a message "Do not find any results!" by assigning to 'scope.person.selected'

plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

How can I do that?

Thanks so much!

Knorr

Answer 1

If we use $select.search to get expect result we must loop again to search. Till now, with version greater than 0.17.1, we can use the most simple solution: using ui-select-no-choice

https://github.com/angular-ui/ui-select/wiki/ui-select-no-choice

Thank you for your support so much!

Knorr

Answer 2

The input data in angular_ui_select goes into the $select.search model. You could use refresh attribute of ui-select-choice. Just pass the function in refresh="test($select.search)",and set delay and min input length using refresh-delay and minimum-input-length attributes respectively. here is an quick example:

<ui-select ng-model="model" theme="theme">
     <ui-select-match>{{data}}</ui-select-match>
     <ui-select-choices repeat="options in data" refresh="yourFunction($select.search)" refresh-delay="100" minimum-input-length="1"></ui-select-choices>      
</ui-select>

I would suggest you go through the documentation, hope it would help. angular-ui-select

Archie

$select.search in <ui-select-choices refresh="$ctrl.handleChange($select.search)" ... is the entered value. – Marlenamarlene

Answer 3

You can use ng-keypress="fn($select.search)" at <ui-select...>
And use this function at controller to get the input.

$scope.fn = function(search) {
//do something with search
}

Kissable

Answer 4

You can also use ng-init="setSelect($select)" at <ui-select...>

Terina

Answer 5

You can do this by creating custom a filter. As in this example ; 'uppercasetr' is custom filter.

<ui-select ng-model="vm.mc" theme="select2" limit="10">
    <ui-select-match placeholder="Country...">{{$select.selected.SectionTitle}}</ui-select-match>
    <ui-select-choices repeat="item in vm.data | propsFilter:{SectionTitle : ($select.search | uppercasetr)} | limitTo:$select.limit">
        <div ng-bind-html="(item.SectionTitle) | highlight: $select.search"></div>
        <small>
            <b>Country:</b> {{item.SectionValue1}}
       </small>
    </ui-select-choices>
</ui-select>

Canalize

Answer 6

You can use the angular-ui-bootstraps's typeahead which serves the same purpose. Here is the pluncker link http://plnkr.co/edit/gsJzdTZHiXZ6MrtTe4F3?p=preview

HTML:

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
      <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

Honniball

Thanks. But I used ui-select in many cases in my project. Changing the plugin is so complicated for me... – Knorr