SelectSearch

Lightweight plugin to easily filter and search across a select's options.

Install

npm i @andreazorzi/selectsearch

Usage

app.js

// SelectSearchimportSelectSearchfrom"@andreazorzi/selectsearch";window.SelectSearch=SelectSearch;// Localesimportselectsearch_itfrom"@andreazorzi/selectsearch/locale/it";window.selectsearch_it=selectsearch_it;

app.css

@import"@andreazorzi/selectsearch/select-search.css";

HTML

<selectid="select-search"><optionvalue="1">Car</option><optionvalue="2">Bike</option><optionvalue="3">Bus</option><optionvalue="4">Plane</option></select><script>letselect_search=newSelectSearch("#select-search",options)</script>

Options List

{
lang: default_lang // an array of translated texts, default locale: it
min_length: 0, // the minimum length to perform the search list_limit: -1, // the limit of the items list
custom_class: { // custom classes attached to the main elements
placeholder: "",
search_input: "",
list_item: ""
},
render: (element) => { return element.textContent
},
onSelect(element, value, text){
}
}

Methods

// Update the list (html is a lis of options)updateOptionsList(html,value=null)// Open the modalopen()// Close the modalclose()// Get the current valuegetValue()// Set valuesetValue(value)