Autocomplete

A special type of input with autocomplete options based on inputted text.

The dealogicData['countries'] array used in the example is a global variable with a list of country objects, each with the following properties:

label: country name
sup: country code
sub: capital city
group: continent name

Please refer to the picklist docs for more details about 'option' objects.

Attributes

attribute:	type:	required?	default:	description:
name	string	no		Name of the embedded input
value	string	no		Input value (this attribute can be used to set & get the input value)
placeholder	string	no		Input placeholder
maxlength	integer	no		Specifies the maximum number of characters (in UTF-16 code units) that the user can enter
icon	string	no	`vc-search`	Icon to show in picklist button
disabled	boolean	no	`false`	Disabled autocomplete
multiple	boolean	no	`false`	Enable multi-select

Methods

setCallback(callback)

Set the callback function that's called whenever the search input value changes.

param:	type:	default:	description:
callback	function		A function that can returns either an Array of option objects or a Promise that resolves with an Array of option objects. The function receives a single parameter: the current value of the search input.

setOptions(options, openDropdown)

Set the options that populate the dropdown.

param:	type:	default:	description:
options	Array		an Array of option objects
openDropdown	boolean	`false`	should the picklist dropdown be opened?

setSelected(options)

Set the selected option(s).

param:	type:	default:	description:
options	Array		an Array of option objects

dropdownOpen()

Opens the autocomplete dropdown

dropdownClose()

Closes the autocomplete dropdown

getValue()

Get current value of input. Please note, this will always return a string. To get the selected value (which can be an object), please listen to the 'selected' event.

Events

selected

Triggered whenever an option is selected. Contains a single option object in 'single' mode. Contains an Array of options objects in 'multiple' mode. Note: from v0.1.16, this event is not triggered when using the 'setSelected' method.

inputfocus

Fired when the input field receives focus.

inputblur

Fired when focus is removed from the input field.

inputchanged

Fired when input value changes (debounced event).

clear

Fired when the input field is cleared (by clicking x)

Examples

Autocomplete (Single)

<dl-autocomplete name="country" icon="vc-search" placeholder="choose a country"></dl-autocomplete>
<dl-input icon="events-city" val="" name="country-output" disabled="true" placeholder="waiting…"></dl-input>

var elInput = document.querySelector('dl-autocomplete[name="country"]')
var elOutput = document.querySelector('dl-input[name="country-output"]')

var filterCountries = function(query) {
  if (!query.length) {
    return []
  }

  var countries = dealogicData['countries']
  var search = query.toLowerCase()
  var options = countries.filter(function(country) {
    var label = typeof country == 'string' ? country : country.label
    return label.toLowerCase().indexOf(search) !== -1
  })

  return options
}

var promiseFilterCountries = function(query) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(filterCountries(query))
    }, 3000)
  })
}

elInput.addEventListener('ready', function(event) {
  if (event.target == elInput) {
    elInput.setCallback(promiseFilterCountries)
  }
})

elInput.addEventListener('selected', function(event) {
  console.log('optionSelected', event.detail)
  elOutput.value = event.detail.label
})

Dealogic Styleguide

section menu