Search Select 2.0.0 Demo

Instructions:

* Mouse Controls

Move with the mouse, click an option to select, click away from the dropdown to close.

* Keyboard Controls

Up/Down to move, Enter to select, Escape to close.

* Searching

Type into the input to narrow down the option list.

Basic example:

  <search-select
    ng-model="main.currentFruitOption"
    options="main.fruitOptions"
    label-keys="name"
    placeholder-text="Select Fruit"
    font-awesome-icon="fa-lemon-o">
  </search-select>

Results in:

Selected Option: {{main.cleanOption(main.currentFruitOption)}}

Multiple label-keys and Disabling:

Controller:

  vm.disabled = false;

HTML:

  <button ng-click="main.disabled = !main.disabled">
    Toggle Disable Value
  </button>

  <search-select
    ng-model="main.currentUserOption"
    options="main.userOptions"
    label-keys="first_name last_name"
    placeholder-text="Select User"
    font-awesome-icon="fa-user"
    disabled="main.disabled">
  </search-select>

Results in:

Selected Option: {{main.cleanOption(main.currentUserOption)}}

Disabled: {{main.disabled}}

Pre-selected option and Custom idKey:

Controller:

  vm.currentVideoGameCharacterOption = { characterId: 6, name: 'Sonic', weapon: 'Speed' }

HTML:

  <search-select
    ng-model="main.currentVideoGameCharacterOption"
    options="main.videoGameCharacterOptions"
    id-key="characterId"
    label-keys="name"
    placeholder-text="Select Character"
    font-awesome-icon="fa-user">
  </search-select>

Search Select 2.0.0 Demo

Instructions:

Basic example:

Results in:

Selected Option: {{main.cleanOption(main.currentFruitOption)}}

Multiple label-keys and Disabling:

Controller:

HTML:

Results in:

Selected Option: {{main.cleanOption(main.currentUserOption)}}

Disabled: {{main.disabled}}

Pre-selected option and Custom idKey:

Controller:

HTML:

Results in:

Selected Option: {{main.cleanOption(main.currentVideoGameCharacterOption)}}