autocomplete/css/autoComplete-phpfb.css
autocomplete/autoComplete.min.js
dompurify/purify.min.js
{
if (acDataAttr["%selector%"].multipleChoices === 'true') {
// Split query into array
const querySplit = input.split(",");
// Get last query value index
const lastQuery = querySplit.length - 1;
// Trim new query
const newQuery = querySplit[lastQuery].trim();
return DOMPurify.sanitize(newQuery);
}
return DOMPurify.sanitize(input);
},
resultsList: {
element: (list, data) => {
const info = document.createElement("p");
info.classList.add("autoComplete_result_list_info");
if (data.results.length > 0) {
info.innerHTML = `Displaying ${data.results.length} out of ${data.matches.length} results`;
} else {
info.innerHTML = `Found ${data.matches.length} matching results for "${data.query}"`;
}
list.prepend(info);
},
noResults: true,
maxResults: acDataAttr["%selector%"].maxResults === undefined?15:acDataAttr["%selector%"].maxResults,
tabSelect: true
},
resultItem: {
highlight: {
render: true
}
},
events: {
input: {
focus: () => {
if (phpfbAutocomplete["%selector%"].input.value.length) phpfbAutocomplete["%selector%"].start();
},
selection(event) {
if (acDataAttr["%selector%"].multipleChoices === 'true') {
const feedback = event.detail;
const input = phpfbAutocomplete["%selector%"].input;
// Trim selected Value
const selection = feedback.selection.value.trim();
// Split query into array and trim each value
const query = input.value.split(",").map(item => item.trim());
// Remove last query
query.pop();
// Add selected value
query.push(selection);
// Replace Input value with the new query
input.value = query.join(", ") + ", ";
} else {
const feedback = event.detail;
phpfbAutocomplete["%selector%"].input.blur();
const selection = feedback.selection.value;
phpfbAutocomplete["%selector%"].input.value = selection;
}
}
}
}
});
if (document.querySelector("%selector%").dataset.startWith) {
phpfbAutocomplete["%selector%"].data.filter = (list) => {
const results = list.filter((item) => {
const inputValue = phpfbAutocomplete["%selector%"].input.value.toLowerCase();
const itemValue = item.value.toLowerCase();
if (itemValue.startsWith(inputValue)) {
return item.value;
}
});
return results;
}
}]]>
{
try {
const source = await fetch(`%src%?search=${query}&max_results=${maxResults}`);
// Data is array of `Objects` | `Strings`
const data = await source.json();
return data;
} catch (error) {
return error;
}
}
},
debounce: acDataAttr["%selector%"].debounce === undefined?0:acDataAttr["%selector%"].debounce,
threshold: acDataAttr["%selector%"].threshold === undefined?0:acDataAttr["%selector%"].threshold,
query: (input) => {
if (acDataAttr["%selector%"].multipleChoices === 'true') {
// Split query into array
const querySplit = input.split(",");
// Get last query value index
const lastQuery = querySplit.length - 1;
// Trim new query
const newQuery = querySplit[lastQuery].trim();
return DOMPurify.sanitize(newQuery);
}
return DOMPurify.sanitize(input);
},
resultsList: {
element: (list, data) => {
const info = document.createElement("p");
info.classList.add("autoComplete_result_list_info");
if (data.results.length > 0) {
info.innerHTML = `Displaying ${data.results.length} out of ${data.matches.length} results`;
} else {
info.innerHTML = `Found ${data.matches.length} matching results for "${data.query}"`;
}
list.prepend(info);
},
noResults: true,
maxResults: maxResults,
tabSelect: true
},
resultItem: {
highlight: {
render: true
}
},
events: {
input: {
focus: () => {
if (phpfbAutocomplete["%selector%"].input.value.length) phpfbAutocomplete["%selector%"].start();
},
selection(event) {
if (acDataAttr["%selector%"].multipleChoices === 'true') {
const feedback = event.detail;
const input = phpfbAutocomplete["%selector%"].input;
// Trim selected Value
const selection = feedback.selection.value.trim();
// Split query into array and trim each value
const query = input.value.split(",").map(item => item.trim());
// Remove last query
query.pop();
// Add selected value
query.push(selection);
// Replace Input value with the new query
input.value = query.join(", ") + ", ";
} else {
const feedback = event.detail;
phpfbAutocomplete["%selector%"].input.blur();
const selection = feedback.selection.value;
phpfbAutocomplete["%selector%"].input.value = selection;
}
}
}
}
});
if (document.querySelector("%selector%").dataset.startWith) {
phpfbAutocomplete["%selector%"].data.filter = (list) => {
const results = list.filter((item) => {
const inputValue = phpfbAutocomplete["%selector%"].input.value.toLowerCase();
const itemValue = item.value.toLowerCase();
if (itemValue.startsWith(inputValue)) {
return item.value;
}
});
return results;
}
}]]>