Mutli index with one hits widget

[dianeba3]

My question is similar to this previous question: "Showing one set of hits with multiple indexes #4490" except now I know that mutli index querying exists in instantsearch.js. I'm just wondering if there is a way to use instantsearch with more than just a few indices (~100+) and display them under one hit instead of each index having its own hits widget.

[Haroenv]

What would the use case be of having that many hits displayed at the same time? does every index have only one hit displayed?

[dianeba3]

Thank you so much!! Another question:

so I am able to get the merged results but I am obviously doing something wrong because the results get rendered in different ways and I know that it is because I am literally styling them in two different ways I'm just not sure how to fix it because I was able to fix it once but then I wasn't able to get multi indexing working. I'm using connectAutocomplete but how do I use it correctly with my hits loop (where I am looping through all of the indeces) here is my code for 3 indices but I need it to work for way more indices

const { algoliasearch, instantsearch, useConnector } = window;
const { connectAutocomplete } = instantsearch.connectors;

const searchClient = algoliasearch('var1', 'var2');

const indexes = ['index1', 'index2', 'index3'];

// Create a search instance
const search = instantsearch({
  indexName: indexes[0], // Primary index
  searchClient,
});

// Add common widgets (like the search box)
search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search...',
  }),
  instantsearch.widgets.configure({
    hitsPerPage: 5,
  }),
]);

function renderMergedHits({ indices, widgetParams }) {
  if (!indices || !Array.isArray(indices)) {
    console.error("indices is undefined or not an array", indices);
    return;
  }

  const mergedHitsHTML = indices
    .flatMap(({ hits }) => hits || [])
    .map(
      (hit) => `
      <div>
        <h1>${instantsearch.highlight({ hit, attribute: "title" })}</h1>
        <a href="${hit.url}">${hit.url}</a>
        <p>${instantsearch.snippet({ hit, attribute: "description" })}</p>
        <p>${instantsearch.snippet({ hit, attribute: "content" })}</p>
      </div>
    `
    )
    .join("");

  widgetParams.container.innerHTML = mergedHitsHTML;
}

const customMergedHits = connectAutocomplete(renderMergedHits);

// Add the custom widget to InstantSearch
search.addWidgets([
  customMergedHits({
    container: document.querySelector("#merged-results"), // Ensure this div exists in HTML
  }),
]);

// Attach each index for multi-index querying
indexes.forEach(( indexName ) => {
  console.log(indexName)
  // Try to check if the index exists using the search client
  searchClient
    .initIndex(indexName)
    .search('')
    .then(() => {
  search.addWidgets([
    instantsearch.widgets.index({
      indexName: indexName 
    })
      .addWidgets([
        instantsearch.widgets.hits({
          container: `#merged-results`, // All results will go to one container
          templates: {
            item: (hit, { html, components }) => html`
              <div>
                <h1>${components.Highlight({ hit, attribute: "title" })}</h1>
                <a href="${hit.url}">${hit.url}</a>
                <p>${components.Snippet({ hit, attribute: "description" })}</p>
                <p>${components.Snippet({ hit, attribute: "content" })}</p>
              </div>
            `,
          },
          transformItems(items) {
            const resultsContainer = document.querySelector("#merged-results");
            if (!search.helper.state.query) {
              resultsContainer.style.display = "none"; // Hide if no query
              return [];
            } else {
              resultsContainer.style.display = "block"; // Show if there is a query
              return items;
            }
          },
        }),
      ]),
  ]);
 }).catch((error) => {
  // If the index doesn't exist or there's an error, log it and skip it
  console.warn(`Index ${indexName} does not exist or failed to load:`, error);
});
});

// Start the search
search.start();

[Haroenv]

this looks fine, but you're rendering both hits and autocomplete, won't you see the results twice like that? I don't think you still need the hits

[dianeba3]

yeah i agree i dont need the hits anymore but without this part of the code I am no longer querying through all of the indices and i only get results from one index

// Attach each index for multi-index querying
indexes.forEach(( indexName ) => {
  console.log(indexName)
  // Try to check if the index exists using the search client
  searchClient
    .initIndex(indexName)
    .search('')
    .then(() => {
  search.addWidgets([
    instantsearch.widgets.index({
      indexName: indexName 
    })
      .addWidgets([
        instantsearch.widgets.hits({
          container: `#merged-results`, // All results will go to one container
          templates: {
            item: (hit, { html, components }) => html`
              <div>
                <h1>${components.Highlight({ hit, attribute: "title" })}</h1>
                <a href="${hit.url}">${hit.url}</a>
                <p>${components.Snippet({ hit, attribute: "description" })}</p>
                <p>${components.Snippet({ hit, attribute: "content" })}</p>
              </div>
            `,
          },
          transformItems(items) {
            const resultsContainer = document.querySelector("#merged-results");
            if (!search.helper.state.query) {
              resultsContainer.style.display = "none"; // Hide if no query
              return [];
            } else {
              resultsContainer.style.display = "block"; // Show if there is a query
              return items;
            }
          },
        }),
      ]),
  ]);
 }).catch((error) => {
  // If the index doesn't exist or there's an error, log it and skip it
  console.warn(`Index ${indexName} does not exist or failed to load:`, error);
});
});

[Haroenv]

you can add the index widget without the hits widget normally too

[dianeba3]

Ok thanks I got that part working.

Another question: So I have hits from multiple indices from one query which is awesome. The hits are formatted the same way but they are rendered separately. How can I set the order of results to be ranked on certain attributes instead of being ordered by different indices. Say I want to rank title how can I have the results be ordered by title and not be indices.

Is there a different way than just doing alphabetical sort on the customHits function like this:
I want to be able to get results at the top that have the query in the title, then description, then content, etc.
Is that possible?

function renderMergedHits({ indices, widgetParams }) {
  if (!indices || !Array.isArray(indices)) {
    console.error("indices is undefined or not an array", indices);
    return;
  }
  const mergedHitsHTML = indices
    .flatMap(({ hits }) => hits || [])
    .sort((a, b) => a.title.localeCompare(b.title)) // Sorting by title alphabetically
    .map(
      (hit) => `
      <div style="border:1px solid black; margin: 20px; padding: 10px;">
        <h1>${instantsearch.highlight({ hit, attribute: "title" })}</h1>
        <a href="${hit.url}">${hit.url}</a>
        <h3>${hit.product}</h3>
        <p>${instantsearch.highlight({ hit, attribute: "description" })}</p>
        <p>${instantsearch.snippet({ hit, attribute: "content" })}</p>
      </div>`).join("");
  widgetParams.container.innerHTML = mergedHitsHTML;
};