Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

Here is the plunker for my issue: http://plnkr.co/edit/9DsLidTZR7RJDEq6PW0H?p=preview

I would like to make the dropdown menu searchable only: the use only sees the list of the dropdown items ONLY when the user starts to type in, and only the corresponding items which contain the typed word or letters should appear in the list, otherwise the list is not shown at all.

<ui-select ng-model="person.selectedValue" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
    <ui-select-choices repeat="person.value as (key, person) in peopleObj | filter: {'value':$select.search}">
      <div ng-bind-html="person.value.name | highlight: $select.search"></div>
      <small>
        email: {{person.value.email}}
        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>
share|improve this question

You can use ng-style and modify the choices ul height property. Don't think there is any OOB solution in the library

<ui-select-choices ng-style="($select.search != '')? {'height' : 'auto'}: {'height' : '0px'}" repeat="person.value as (key, person) in peopleObj | filter: {'value':$select.search}">
        <div ng-bind-html="person.value.name | highlight: $select.search"></div>
        <small>
        email: {{person.value.email}}
        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
      </small>
</ui-select-choices>

Let us know.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.