You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
3.3 KiB
68 lines
3.3 KiB
new autoComplete({
|
|
data: { // Data src [Array, Function, Async] | (REQUIRED)
|
|
src: async () => {
|
|
// API key token
|
|
// const token = "this_is_the_API_token_number";
|
|
// User search query
|
|
const query = document.querySelector("#autoComplete").value;
|
|
// Fetch External Data Source
|
|
const source = await fetch(`/api/pokemon.json?nom=${query}`);
|
|
// Format data into JSON
|
|
const data = await source.json();
|
|
// Return Fetched data
|
|
return data;
|
|
},
|
|
key: ["nom"],
|
|
cache: false
|
|
},
|
|
query: { // Query Interceptor | (Optional)
|
|
manipulate: (query) => {
|
|
return query.replace("Pikachu", "Charmander");
|
|
}
|
|
},
|
|
sort: (a, b) => { // Sort rendered results ascendingly | (Optional)
|
|
if (a.match < b.match) return -1;
|
|
if (a.match > b.match) return 1;
|
|
return 0;
|
|
},
|
|
placeHolder: "Saisir un nom de pokemon, type, generation...", // Place Holder text | (Optional)
|
|
selector: "#autoComplete", // Input field selector | (Optional)
|
|
observer: true, // Input field observer | (Optional)
|
|
threshold: 3, // Min. Chars length to start Engine | (Optional)
|
|
debounce: 300, // Post duration for engine to start | (Optional)
|
|
searchEngine: "strict", // Search Engine type/mode | (Optional)
|
|
resultsList: { // Rendered results list object | (Optional)
|
|
container: source => {
|
|
source.setAttribute("id", "pokemon_list");
|
|
},
|
|
destination: "#autoComplete",
|
|
position: "afterend",
|
|
element: "ul"
|
|
},
|
|
maxResults: 5, // Max. number of rendered results | (Optional)
|
|
highlight: {
|
|
render: true, // Highlight matching results | (Optional)
|
|
},
|
|
resultItem: { // Rendered result item | (Optional)
|
|
content: (data, source) => {
|
|
source.innerHTML = data.match;
|
|
},
|
|
element: "li"
|
|
},
|
|
noResults: (dataFeedback, generateList) => {
|
|
// Generate autoComplete List
|
|
generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
|
|
// No Results List Item
|
|
const result = document.createElement("li");
|
|
result.setAttribute("class", "no_result");
|
|
result.setAttribute("tabindex", "1");
|
|
result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`;
|
|
document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
|
|
},
|
|
onSelection: feedback => { // Action script onSelection event | (Optional)
|
|
const indexSelection = feedback.selection.index
|
|
const resultNameFromAutocomplete = feedback.matches[indexSelection].value.nom
|
|
document.getElementById("autoComplete").value = resultNameFromAutocomplete
|
|
window.location = "/pokemon?keyword=" + resultNameFromAutocomplete
|
|
}
|
|
});
|
|
|