Hi guys , Im trying to implement both features on my site.
Following this official doc , im stucked at the point when you replace the autosearch box for the autocomplete div.
At this point , I can compile the code and have not errors at the console but nothing happend on the auto complete box , so …
Can you helpme to pass this ?
Following improvements on the documentation are react bases wich I can not handle.
so…
Is it mandatory to implement some of the mentioned plugins here ( Query Suggestions/ Query Suggestions )?
If so … where can I find a javascript implementation example ? (with no react … typescript …just vanilla js).
If not , how can I finish my implementation in the simplest possible way to return a template from the autocomplete searchbox.
Thanks.
Following … my bootstrap.js
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
import algoliasearch from 'algoliasearch/lite'
import instantsearch from 'instantsearch.js'
import historyRouter from 'instantsearch.js/es/lib/routers/history'
import {
searchBox,
hierarchicalMenu,
refinementList,
hits,
pagination,
} from 'instantsearch.js/es/widgets'
import { connectSearchBox } from 'instantsearch.js/es/connectors'
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions'
import '@algolia/autocomplete-theme-classic'
const searchClient = algoliasearch(
'931R1ZPBTQ',
'de5dae88e9d0fc0588d34193d469827c'
)
const INSTANT_SEARCH_INDEX_NAME = 'posts_index'
const instantSearchRouter = historyRouter()
const search = instantsearch({
searchClient,
indexName: INSTANT_SEARCH_INDEX_NAME,
routing: instantSearchRouter,
})
const virtualSearchBox = connectSearchBox(() => {})
search.addWidgets([
virtualSearchBox({}),
refinementList({
container: '#category-list',
attribute: 'category',
templates: {
items: `
<div class="leo-item">
<a href="{{url}}" style="{{#isRefined}}font-weight: bold{{/isRefined}}">
<span>{{label}} ({{count}})</span>
</a>
</div>
`,
},
cssClasses: {
item: ['leo-item'],
root: 'leo-root',
list: [
'leo=list',
'MyCustomRefinementListList--subclass',
],
},
transformItems(items) {
return items.map(item => ({
...item,
highlighted: item.highlighted.toUpperCase(),
}));
},
}),
hits({
container: '#hits',
templates: {
item: `
<div class="inner">
<div row no-padding ">
<div class="">
<a href="{{url}}">
<div class="">
<img src="{{picture}}"
class="lazyload thumbnail no-margin" alt="{{slug}}" data-nsfw-filter-status="sfw">
</div>
</a>
</div>
</div>
<div row add-desc-box">
<div class="items-details">
<h5 class="add-title">
<a href="{{url}}">{{title}} </a>
</h5>
<span class="info-row">
<span class="date">
<i class="icon-clock"></i> Jan 20th, 2022 at 11:06
</span>
<span class="category">
<i class="icon-folder-circled"></i>
<a href="http://172.30.200.117/category/automobiles/cars" class="info-link">
{{category}}
</a>
</span>
<span class="item-location">
<i class="icon-location-2"></i>
{{city}}
</span>
</span>
</div>
</div>
<div class="row text-end price-box" style="white-space: nowrap;">
<div class="row w-100">
<div class="col-12 mt-1 p-0 d-flex justify-content-end">
<h2 class="item-price">
$ {{price}}
</h2>
</div>
</div>
</div>
</div>
</div>
`,
},
}),
pagination({
container: '#pagination',
}),
])
search.start()
function setInstantSearchUiState(indexUiState) {
search.setUiState(uiState => ({
...uiState,
[INSTANT_SEARCH_INDEX_NAME]: {
...uiState[INSTANT_SEARCH_INDEX_NAME],
// We reset the page when the search state changes.
page: 1,
...indexUiState,
},
}))
}
// Return the InstantSearch index UI state.
function getInstantSearchUiState() {
const uiState = instantSearchRouter.read()
return (uiState && uiState[INSTANT_SEARCH_INDEX_NAME]) || {}
}
const searchPageState = getInstantSearchUiState()
autocomplete({
container: '#autocomplete',
placeholder: 'Search for products',
detachedMediaQuery: 'none',
initialState: {
query: searchPageState.query || '',
},
onSubmit({ state }) {
setInstantSearchUiState({ query: state.query })
},
onReset() {
setInstantSearchUiState({ query: '' })
},
onStateChange({ prevState, state }) {
if (prevState.query !== state.query) {
setInstantSearchUiState({ query: state.query })
}
},
})