Search Select 2.0.0 Demo

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:

Select Fruit
  • Apple
  • Banana
  • Strawberry
  • Plum
  • Kiwi
  • Peach
  • Orange
  • Grapefruit
  • Grape
  • Mango
  • Blueberry

Selected Option: {}

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:

Select User
  • Bob Jones
  • Sarah Mitchell
  • Hoon Kim
  • Nelson Castelle
  • Celeste Blaroux
  • Gabriela Caristole

Selected Option: {}

Disabled: false

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>

Results in:

Select Character
  • Link
  • Snake
  • Peach
  • Samus
  • Pac-Man
  • Sonic
  • Infernape
  • Mia

Selected Option: {"characterId":6,"name":"Sonic","weapon":"Speed","ss_index":5,"ss_display_name":"Sonic"}