document.addEventListener('alpine:init', () => {
Alpine.data('predictiveSearch', () => ({
dropdown_open: false,
query: '',
loading_suggestions: false,
preferred_suggestion_count: 10,
suggestions: [],
open() {
if (this.dropdown_open || !this.query.length) return;
this.dropdown_open = true;
},
close(focusAfter) {
if (!this.dropdown_open) return;
this.dropdown_open = false;
focusAfter && focusAfter.focus && focusAfter.focus()
},
async getSuggestions(query) {
const vm = this;
// abort any previous requests still in progress
if (vm.fetchController) {
vm.fetchController.abort();
}
if (!query.length) {
vm.query = '';
vm.close(vm.$refs.searchInput);
return;
}
const reqBody = {
billable_account_id: '36124',
search_limit: vm.preferred_suggestion_count,
search_term: vm.query,
}
try {
vm.fetchController = new AbortController();
const params = new URLSearchParams(reqBody).toString();
const url = `/api/internal/wf-appliance/predictive-search-terms-get?API_KEY=WSKYRINYDNCQUADFAKXHUQSABSPHABPYTICFKKYOVDTPWYNSAJJTJMHGBAGU&${params}`;
const res = await fetch(url,
{ signal: vm.fetchController.signal }
);
if (!res.ok) throw new Error('Predictive search endpoint not found');
const { success, suggested_terms } = await res.json();
if (!success) throw new Error('Error predicting search terms');
if (!suggested_terms.length) return vm.close(vm.$refs.searchInput);
vm.suggestions = suggested_terms.map(term => term.toLowerCase());
if (!vm.dropdown_open) vm.open();
} catch (err) {
if (err.name === 'AbortError') {
return;
}
vm.suggestions = [];
vm.close(vm.$refs.searchInput);
}
},
onSuggestionClick(suggestion) {
this.close();
this.query = suggestion;
this.$nextTick(() => this.$refs.searchForm.submit())
},
highlightNonMatchingSubstring(suggestion) {
const query = this.query.toLowerCase();
const suggestionLowercase = suggestion.toLowerCase();
// check if the suggestion exactly matches the query
if (suggestionLowercase === query) {
return `
<
span>${suggestion}
>`;
}
// check if the suggestion starts with the query
if (suggestionLowercase.indexOf(query) === 0) {
const nonMatching = suggestion.substring(query.length);
return `
<
`;
}
// check if the suggestion starts with the query
if (suggestionLowercase.indexOf(query) === 0) {
const nonMatching = suggestion.substring(query.length);
return `
Next-gen Durapella Power Reclining Loveseat and Power Recliner
22003U3
Next-Gen DuraPella Sand Collection
Regular Price
$5,396.99
Starting At
Starting At
See price in cart
Our Price
?
$4,165.96
Regular PriceYou Save
$1,231.03
You Save
Regular Price
See Details
In Stock
In Stock
Ashley Consumer Choice
Features
See Details
Quick View
Quick Specs
Check to Compare:
Click to Compare
See Full Details
Midnight-madness 4-piece Sectional
Signature Design By Ashley
Midnight-Madness Onyx Collection
This item may have manufacturer enforced sales and delivery restrictions.
Please enter your Zip Code to check the manufacturer approved sales and delivery radius.
Our Price