Modify suggestions container and result list

Im using Algolia with wordpress and Im trying to modify the autocomplete suggestions. Basically i wanna wrap the first 5 results in a different element than the rest. For example:

    first 5 results
rest of results

I feel like I’ve tried everything but I haven’t come any closer to achieving this. Can somebody point me in the right direction? Right now my code looks like this:

jQuery(algolia.autocomplete.input_selector).each(function (i) {

      var $searchInput = jQuery(this);

        var config = {

            debug: algolia.debug,

            hint: false,

            openOnFocus: true,

            appendTo: 'body',

            minLength: 0,

            autoselect: true,

            templates: {

                empty: wp.template('autocomplete-empty'),



      if (algolia.powered_by_enabled) {

        config.templates.footer = wp.template('autocomplete-footer');


I’ve tried adding
dropdownMenu: wp.template('tmpl-autocomplete-container'),
to the templates, but when I add this the autocomplete stops working.

Anyone know where I should start?

Hi @ergran,

Can you describe how you are integrating Algolia into your WordPress website? Are you using a prebuilt plugin or is did you write your own plugin? Could you provide some code snippets where you are getting your search results from Algolia?