angularjs ui-select-choices dropdown aphabetical order depending on the input given

Question

I'm using https://github.com/angular-ui/ui-select for the website I'm working on. Currently the code is as follows:

       <ui-select ng-model="model.states">
         <ui-select-match placeholder="State">
           {{$item.Name}}
         </ui-select-match>
         <ui-select-choices repeat="item.Code as item in statesArray | filter:$select.search">
            {{item.Name}}
         </ui-select-choices>
      </ui-select>

When I type anything in the input field, for example "a", ui-select-choices shows all the fields containing "a" (by default). What I want to do is, I want to show all the states starting with "a" only. If nothing is typed in the input box, then show all the fields in alphabetical order. Can someone please propose a solution? I saw few other posts but no one has answered this question yet. Thanks in advance.

Example

Here's an example, suppose states array has states like California, Connecticut, Alaska, Arizona, New York.

If nothing is typed in the input field, dropdown should show Alaska, Arizona, California, Connecticut, New York (which can be achieved using orderBy filter).

If user types "a" in the input field, dropdown should show Alaska, Arizona and no other fields as Alaska and Arizona are only fields starting with "a". If user types "c", dropdown should show California, Connecticut. If user types "ca", dropdown should show California only as it only matches the input string given.

Answer 1

If I understand you correctly, I think all you need to do is add

| orderBy:'Name'

<ui-select-choices repeat="item.Code as item in statesArray | filter:$select.search | orderBy:'Name'">
{{item.Name}}
</ui-select-choices>

Check out orderBy for more information

Answer 2

After digging a little and with Tomy's and KreepN's help, I found the answer. Here it is,

   <ui-select ng-model="model.states">
     <ui-select-match placeholder="State">
       {{$item.Name}}
     </ui-select-match>
     <ui-select-choices repeat="item.Code as item in statesArray | startsWith:$select.search | orderBy:'Code'">
        {{item.Name}}
     </ui-select-choices>
   </ui-select>

startsWith Filter is as follows:

.filter('startsWith', function() {
    return function(array,search) {
        if(!_.isUndefined(array) && !_.isUndefined(search)) {
            var matches = [];
            for (var i = 0; i < array.length; i++) {
                if (array[i].Name.toUpperCase().indexOf(search.toUpperCase()) === 0 &&
                    search.length <= array[i].Name.length) {
                    matches.push(array[i]);
                }
            }
            return matches;
        }
    };
});

Answer 3

I tried all the options above but I achieved the result only in this case. It works for me:

<ui-select-choices repeat="group in groups | filter: $select.search | orderBy:['name']">
  {{ group.name }}
</ui-select-choices>