Autocomplete
Autocomplete.js
This template comes with an integration of autocomplete.js plugin. See more about it at https://tarekraafat.github.io/autoComplete.js/ or simply try out some nice examples of its functionality below.
Basic example - using data attributes
Try typing "sau".
<input type="search" data-source='["Sauce,Wild Boar,Goat"]' placeholder="Search for food..." class="form-control w-100" id="#autoComplete1" />
Loading JSON array
Try typing your country.
data: {
src: async () => {
try {
// Fetch Data from external Source
const source = await fetch('data/countries.json');
// Data is array of `Objects` | `Strings`
const data = await source.json();
return data.countries;
} catch (error) {
return error;
}
},
},
Basic example - JavaScript initialization
Try typing "sau".
const autoCompleteJS2 = new autoComplete({
selector: "#autoComplete2",
data: {
src: ["Sauce", "Wild Boar", "Goat"],
}
});
Custom search in JSON object
Try typing "Whi" -> it searches in surnames, firstnames, company names. After you select the item, person's email is inserted into the input field.
const autoCompleteJS4 = new autoComplete({
selector: "#autoComplete4",
data: {
src: [
{ "name": "Alyce", "surname": "White", "company": "Combot", "email": "alycewhite@combot.com", "city": "Talpa" },
{ "name": "Santos", "surname": "Pierce", "company": "Franscene", "email": "santospierce@franscene.com", "city": "Vienna" },
{ "name": "Deirdre", "surname": "Reed", "company": "Whiskey Comp.", "email": "deirdrereed@whiskeycomp.com", "city": "Belva" },
{ "name": "Whitaker", "surname": "Brennan", "company": "Opticom", "email": "whitakerbrennan@opticom.com", "city": "Lodoga" },
{ "name": "Kristin", "surname": "Norman", "company": "Irack", "email": "kristinnorman@irack.com", "city": "Bodega" }
],
keys: ["name", "surname", "company"],
},
resultItem: {
highlight: true,
},
events: {
input: {
selection: (event) => {
const selection = event.detail.selection.value;
autoCompleteJS4.input.value = selection.email;
}
}
}
});
