angularjs ui-select disable dropdown list and make it only searchable

Question

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>

Searching · Accepted Answer · 2017-02-20 01:04:11Z

1

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.

answered Feb 20, 2017 at 1:04

Searching

2,2791 gold badge17 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

angularjs ui-select disable dropdown list and make it only searchable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related