@default-js/defaultjs-html-typeahead v1.5.6
defaultjs-html-typeahead
How install
npm install @default-js/defaultjs-html-typeahead
How to use declarative?
The defaultjs-html-typeahad
provide multiple ways to achieve the solution:
1. Solution
There is a service available, there a suggestion provide and the response is a json array with the folowing stucture:
[
{
"text" : "[string]",
"value" : "[String]", //optional
},
...
]
defaultjs-html-typeahead
can be used as follow:
<input type="text" is="d-typeahead" request="/request/to/suggestion/data.json">
The value would be set as value of input field.
2. Solution
There is a service available, there provide a suggestion data, but the structure does not meet the required specification:
<input type="text" is="d-typeahead"
request="/request/to/suggestion/data.json"
response-suggestions="[expression to select the array with suggestions]"
suggestion-text="[expression to select and/or build the suggestion text]"
suggestion-value="[expression to select and/or build the suggestion value]">
The expression for response-suggestions
, suggestion-text
and suggestion-value
uses the expression language @default-js/defaultjs-expression-language
.
How to use programmatically?
<input type="text" is="d-typeahead" self-handle-selection>
//main.js
const input = document.queryElement("input");
input.on("d-typeahead:load-suggestion", (event) => {
event.stopPropagation();
const suugestions = [
{
title: "suggestion title one", //required
value: "suggestion value one", //optional
data: {name: "suggestion data one"} //optional
},
{
title: "suggestion title two", //required
value: "suggestion value two", //optional
data: {name: "suggestion data two"} //optional
},
{
title: "suggestion title three", //required
value: "suggestion value three", //optional
data: {name: "suggestion data three"} //optional
}
];
input.trigger("d-typeahead:show-suggestion", suggestions);
});
input.on("d-typeahead:selected-suggestion", (event) => {
event.stopPropagation();
const data = event.details; // suggestion property chain: data, value, text
//by self-handle-selection, the value of input field must set manually!
input.value = data.name;
//do somethings
});
Dom Events
d-typeahead:load-suggestion
This event is triggered, if the value from field changed. This event must be catched to provide suggestions, by trigger the event d-typeahead:show-suggestion
with an array of suggestion objects.
d-typeahead:show-suggestion
This event must be triggered with an array of suugestion objects on input field to show the suggestions.
d-typeahead:selected-suggestion
This event would be triggered, if the user select an suggestion.
Javascript API
The defaultjs-html-typeahead
provide on web component that extends the inputfield.
class HTMLTypeaheadElement extends componentBaseOf(HTMLInputElement)