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 ? — MaKCbIMKo
– MaKCbIMKo, Commented May 1, 2016 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
– sqlcte, Commented May 1, 2016 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
– sqlcte, Commented May 1, 2016 at 20:16

Sampath · Accepted Answer · 2016-05-02 17:28:09Z

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 2, 2016 at 17:28

answered May 1, 2016 at 21:12

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sqlcte Over a year ago

thanks Sapath but it did not work in my case.May be because I'm using mutiselect.

Sampath Over a year ago

can you put the url of the angular module which you're using (mutiselect) ?

sqlcte Over a year ago

Sorry Sampath I could not understand you?

Sampath Over a year ago

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 Over a year ago

Then why my above example is not working for you ? I have used the same api for the above Plunker.

|

Collectives™ on Stack Overflow

Angularjs UI Select StartsWith search

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related