[{
"game": "test" Примерно тут ссылка
},
{
"game": "test2" Примерно тут ссылка
}
]
javascript:
// autoComplete.js on type event emitter
document.querySelector("#autoComplete").addEventListener("autoComplete", function (event) {
console.log(event.detail);
// console.log(autoCompletejs);
});
// The autoComplete.js Engine instance creator
const autoCompletejs = new autoComplete({
data: {
src: async function () {
// Fetch External Data Source
const source = await fetch("./db/generic.json");
const data = await source.json();
// Returns Fetched data
return data;
},
key: ["game"],
},
sort: function (a, b) {
if (a.match < b.match) {
return -1;
}
if (a.match > b.match) {
return 1;
}
return 0;
},
query: {
manipulate: function (query) {
return query.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
},
},
trigger: {
event: ["input","focusin", "focusout"],
condition: function (query) {
return !!query.replace(/ /g, "").length && query !== "hamburger";
},
},
selector: "#autoComplete",
debounce: 0,
searchEngine: "strict",
highlight: true,
maxResults: 5,
resultsList: {
render: true,
container: function (source) {
source.setAttribute("id", "autoComplete_list");
},
element: "ul",
destination: document.querySelector("#autoComplete"),
position: "afterend",
},
resultItem: {
content: function (data, source) {
source.innerHTML = data.match;
},
element: "li",
},
noResults: function () {
const result = document.createElement("li");
result.setAttribute("class", "no_result");
result.setAttribute("tabindex", "1");
result.innerHTML = "No Results";
document.querySelector("#autoComplete_list").appendChild(result);
},
});
document.querySelector("#autoComplete").addEventListener(eventType, function () {
// Hide results list & show other elemennts
if (eventType === "blur") {
resultsList.style.display = "none";
} else if (eventType === "focus") {
// Show results list & hide other elemennts
resultsList.style.display = "block";
}
});