Angularjs UI Select StartsWith search

Question

In my angularjs app I'm using UI select.This is my Html

<ui-select name="service" multiple ng-model="service.ServiceName" close-on-select="false" >
                <ui-select-match placeholder="Select Services...">{{$item.ServiceName}}</ui-select-match>
                <ui-select-choices repeat="service in Services | filter: {ServiceName: $select.search} | filter:myFilter track by service.ServiceId">
                      {{service.ServiceName}}
                </ui-select-choices>

Select filter provides contains search but I want to filter elements on the basis of StartsWith.I have seen a couple of examples of startswith filter but I'm unable to incorporate them in UI Select.

And no one of startswith filters that you found isn't working? Did you try something like [that](http://stackoverflow.com/questions/19501300/angular-js-startswith-custom-filter) ? — MaKCbIMKo, May 01 '16 at 19:59
@MAkCblMKo I have tried that and put a debug point in the startswith function but it never hits the debug point. — sqlcte, May 01 '16 at 20:14
@kabaehr filter: {ServiceName: $select.search} this is the default ui select filter which I'm using for search and myFilter is for excluding the selected services frmo the dropdownlist. — sqlcte, May 01 '16 at 20:16

Sampath · Accepted Answer · 2016-05-02T17:28:09.960

3

Single item : Plunker.

JS

vm.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }

Html

<ui-select-choices repeat="country in ctrl.countries|filter:$select.search:ctrl.startsWith">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>

Multiple Items : Plunker

JS is same as the above.

Html

<ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search : ctrl.startsWith">
      {{color}}
    </ui-select-choices>
  </ui-select>

edited May 02 '16 at 17:28

answered May 01 '16 at 21:12

Sampath

63,341
64
307
441

thanks Sapath but it did not work in my case.May be because I'm using mutiselect. – sqlcte May 01 '16 at 23:02
can you put the url of the angular module which you're using (mutiselect) ? – Sampath May 02 '16 at 00:31
Sorry Sampath I could not understand you? – sqlcte May 02 '16 at 09:48
Which `Api` are you using for the above `UI Select` ? B'cos lot of apis are there for the same purpose. What did you mean by `mutiselect` ? – Sampath May 02 '16 at 10:03
Then why my above example is not working for you ? I have used the same api for the above Plunker. – Sampath May 02 '16 at 10:31
Sampath\ by mutiselect I mean I can select multiple options from the available list as you can see there is mutiple attribute in my html. – sqlcte May 02 '16 at 10:40
It is working for `Multiple items` also.Please see the Updated answer above. – Sampath May 02 '16 at 17:29

Angularjs UI Select StartsWith search

1 Answers1