Conditional rendering of hits

Hey,
i’m trying to get results for my search through Autocomplete.js.
I want to get the general results for the main queries. (name, email, owner name…)
and after that i want to add another div for the queries that match a category (category:“food”).
If the query doesn’t match a category nothing should get rendered.

This is the code i have, but doesn’t really seem to work, because if it doesn’t match a category an empty div gets rendered. also, i think that i’m requesting the same data twice from algolia, which increases the costs.

Here’s the code:

var client = algoliasearch("UWHA6Y150Y", "Search api key");
var index = client.initIndex("business");
var myAutocomplete = autocomplete(
  "#search-input",
  { hint: true, autoselect: true, debug: true },
  [
{
  source: autocomplete.sources.hits(index),
  displayKey: "name",

  templates: {
    suggestion: function (suggestion) {
      console.log(suggestion);
      var sugTemplate = `<a href="/biz/${suggestion.objectID}"><img src='${
        suggestion.logo
      }'/>
      <span>  
      ${suggestion._highlightResult.name.value}
      </span>
      <span>  
      ${suggestion._highlightResult.firstName.value} ${
        suggestion._highlightResult.lastName.value
      } 
      </span>
      <span>  
      ${suggestion._highlightResult.category.value}
      </span>
      <span>  
      ${suggestion._highlightResult.phone.value}
      </span>
      <span>  
      ${suggestion._highlightResult.website.value}
      </span>
      <span>  
      ${suggestion.email || ""}
      </span>
      
      </a>`;

      return sugTemplate;
    },
    empty: (noResultSuggestion) => {
      return `Didn't find what you were looking for? Add your business <a href="/business/create">Here</a>`;
    },
  },
},
{
  source: autocomplete.sources.hits(index),
  templates: {
    minLength: 1,
    name: "Category",
    suggestion: (suggestion) => {
      const catTemplate =
        suggestion._highlightResult.category.matchedWords.length > 0
          ? `${suggestion._highlightResult}` //this is the template for the meanwhile
          : undefined;
      console.log(typeof catTemplate);
      if (typeof catTemplate === "undefined") {
        console.log("helloo");
        return ; //if query doesn't match a category render nothing
      }
      return catTemplate;
    },
  },
},
  ]
).on("autocomplete:selected", function (event, suggestion, dataset) {
  console.log("suggestion and dataset: ", suggestion, dataset);
});

document
  .querySelector(".searchbox [type='reset']")
  .addEventListener("click", function () {
document.querySelector(".aa-input").focus();
console.log(this);
this.classList.add("hide");
myAutocomplete.autocomplete.setVal("");
  });

document.querySelector("#search-input").addEventListener("keyup", function () {
  var searchbox = document.querySelector(".aa-input");
  var reset = document.querySelector(".searchbox [type='reset']");
  if (searchbox.value.length === 0) {
reset.classList.add("hide");
  } else {
reset.classList.remove("hide");
  }
});

Trying to find a way to request the data once, and render at the bottom of the results another div with the category.

Thanks in advance.

Hello,

Autocomplete.js do not support the “shared request” use case.

What you do is to store a promise outside and re-use it when needed.
NB: code is untested but you got this idea

const index = client.initIndex('myindex');
const promiseSearch;
const lastQuery;
function mySource(query, callback) {
  if (promiseSearch && query === lastQuery) {
    return promiseSearch.then((answer) => callback(answer));
  }

  lastQuery = query;
  promiseSearch = index.search(query, { hitsPerPage: 1, facetFilters: 'category:mycat' }).then(function(answer) {
    callback(answer.hits);
  }, function() {
    callback([]);
  });
}

var myAutocomplete = autocomplete(
  "#search-input",
  { hint: true, autoselect: true, debug: true },
  [ 
    {
      source: mySource
    },
    {
      source: mySource
    },
  ],
)

Hope this helps