ember-advanced-combobox v5.1.8

Ember-advanced-combobox

Ember combobox that can (beside others):

• filter items
• sort items
• multiselect items
• mobile support ("almost" as native)
• lazy loading of combobox items

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

We use BrowserStack to make sure this addon works on all browsers.

Installation

Warning: works for Ember >= 2.8.0

ember install ember-advanced-combobox

This addon uses FontAwesome by default - at the moment you have to provide it for yourself (this addon does not install it for you). You can however use any font icon set you want, but do not forget to configure this addon (more in section Global configuration -> propery icons)

Basic usage

{{combo-box  
  valueList=valueList
  selected=selectedItem
  itemKey='itemKey'
  itemLabel='itemLabel'  
  onSelected=(action 'onSelected')  
}}

For more usage examples see dummy application.

Also note that if there is only one item available in combobox, it will be automatically selected.

Styling

Most often you would like to style the mobile version of combobox. To do this you can make use of following CSS classes:

• .combobox-mobile-dialog - dialog itself (container for all other elements)
• .header - DIV above the dialog
• .footer - DIV below the dialog (contains buttons)
• .btn-cancel - button to cancel dialog
• .btn-accept - button to confirm selection (for multiselect combobox only)

Global configuration

There are 2 ways to configure the combobox: using config/environment.js or by injecting service ember-advanced-combobox/adv-combobox-configuration-service:

environment.js configuration

Add this to your config/environment.js file:

  var ENV = {

  //------------------------
  "ember-advanced-combobox": {
    emptySelectionLabel: "",
    chooseLabel: "Choose:",
    multiselectValueLabel: "Selected items: ",
    asyncLoaderStartLabel: "Loading...",
    emptyValueList: 'No items',
    mobileFilterPlaceholder: 'Enter filter here',
    mobileOkButton: 'Confirm',
    mobileCancelButton: 'Cancel',
    lazyDebounceTime: 1000,
    minLazyCharacters: 3,
    icons: {
      dropdown: 'fa fa-chevron-down',
      'checkbox-checked': 'fa fa-check-square-o',
      'checkbox-unchecked': 'fa fa-square-o',
      loading: 'fa fa-circle-o-notch fa-spin fa-fw'
    }
  }
  //---------------------------

}

Configuration service ember-advanced-combobox/adv-combobox-configuration-service enables you to customize the combobox at runtime (e.g. beacuse of translations):

  comboboxConfig: Ember.inject.service('adv-combobox-configuration-service');

  this.get('comboboxConfig').setConfiguration("emptySelectionLabel", "some value");