Autocomplete with Algolia Search plugin

Kirby 2 Solved ✅
1

I m having some issues trying to set up the autocomplete feature of the algolia search plugin as we can find on the getkirby site (titles and urls appearing below the search input as suggestions).

Algolia search plugin is working pretty well on my local site with this configuration to get the results from my index imported in algolia. It retrieves titles and texts.

I set up the autocomplete scripts in my footer as the algolia doc suggests https://www.algolia.com/doc/guides/search/auto-complete/ but I can’t figure out how to make it work.

Has someone already tried that ? Well, I guess at leaset the Kirby team on their site :slight_smile:

The autocomplete input from algolia looks like this

<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for players or teams..." name="search" autocomplete="off" />

and the one given in exemple on the algolia plugin for kirby like this :

<input type="search" name="q" value="<?php if($results) { echo esc($results->query()); } ?>">
<input type="submit" value="Search">

Does someone has an idea about it ?
Thanks.

2

As far as I can see, Kirby quick search uses awesomplete.js, not autocomplete.js, see the site.js file on the getkirby repo: https://github.com/getkirby/getkirby.com/blob/master/assets/js/site.js#L3550

3

Hi texnixe,
thanks for your reply it helped me get going. it 's now working fine. :sweat_smile: :grinning:

Just for others with this issue, I downloaded awesomplete.js and have now in my footer

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>

and

<?php echo js('assets/js/awesomplete.js') ?>

plus the search part of site.js of the kibry site in order to have it working with

<div class="quicksearch">
  <form action="<?= url('search') ?>">
    <label for="quicksearch">Search</label>        
    <input type="search" id="quicksearch" name="q">     
  </form>
</div>