Autocomplete / Select / Typeahead component made with Svelte based on https://github.com/tborychowski/svelte-autocomplete
- no dependencies
- use plain lists or array of objects
- option to define a label field or function
- option to define more fields used for search
See live demo at http://simple-svelte-autocomplete.surge.sh/
Install the component:
npm i -D simple-svelte-autocomplete
Import the component and define items:
import AutoComplete from "simple-svelte-autocomplete";
const colors = ["White", "Red", "Yellow", "Green", "Blue", "Black"];
let selectedColor;
And use it like this:
<AutoComplete items={colors} bind:selectedItem={selectedColor} />
You can also use it with array of objects:
const colorList = [
{ id: 1, name: "White", code: "#FFFFFF" },
{ id: 2, name: "Red", code: "#FF0000" },
{ id: 3, name: "Yellow", code: "#FF00FF" },
{ id: 4, name: "Green", code: "#00FF00" },
{ id: 5, name: "Blue", code: "#0000FF" },
{ id: 6, name: "Black", code: "#000000" }
];
let selectedColorObject;
Just define which field should be used as label:
<AutoComplete
items={colorList}
bind:selectedItem={selectedColorObject}
labelFieldName="name" />
Specifying function for label instead of field name is also supported:
<AutoComplete
items={colorList}
bind:selectedItem={selectedColorObject}
labelFunction={color => color.id + '. ' + color.name} />
By default the component searches by the item label, but it can also search by custom fields by specifying keywords
function. For example to enable searching by color name and color HEX code:
<AutoComplete
items={colorList}
bind:selectedItem={selectedColorObject}
labelFieldName="name"
keywordsFunction={color => color.name + ' ' + color.code} />
Props you may want to specify include:
className
- apply a className to the controldisabled
- disable the controlname
- generate an HTML input with this name, containing the current valueplaceholder
- change the text displayed when no option is selectedbeforeChange
- function called before a new value is selectedonChange
- function called after new value is selecteditems
- array of items the user can select fromselectedItem
- the current item that is selected (object if the array of items contains objects)labelFieldName
- the name of the field to be used for showing the items as text in the droprownkeywordsFieldName
- the name of the filed to search byvalue
- derived value from theselectedItem
, equals toselectedItem
ifvalueFieldName
is not specifiedvalueFieldName
- field to use to derive the value from the selected itemlabelFunction
- optional function that creates label from the item. If usedlabelFieldName
is ignoredkeywordsFunction
- optional function that creates text to search from the item. If usedkeywordsFieldName
is ignoredvalueFunction
- optional function that derives the value from the selected item. If usedvalueFieldName
is ignoredkeywordsCleanFunction
- optional function to additionally process the derived keywords from the itemtextCleanFunction
- optional function to additionally process the user entered textselectFirstIfEmpty
- set to true to select the first item if the user clears the text and closes the dropdown. Defaults to false.minCharactersToSearch
- minimum length of search text to perform search, defaults to 1maxItemsToShowInList
- maximum number of items to show in the dropdown list, defaults 0 (no limit)noResultsText
- text to show in the dropdown when the search text does not match any item. Defaults to "No results found". Can be set to "" to not show anything.debug
- flag to enable detailed log statements from the component
The component is inteded to use with Builma but it can be adapted to use Boostrap or anything else.