> ## Documentation Index > Fetch the complete documentation index at: https://algolia.com/llms.txt > Use this file to discover all available pages before exploring further. # Autocomplete with Federated Search > Combine suggestions from multiple indices in a single interface. A federated search offers search results, Query Suggestions, product categories, and other content from multiple indices in a single interface. Screenshot of a search interface showing autocomplete suggestions for 'cell' with product results and categories. Run and edit the Autocomplete with Federated Search example in CodeSandbox. View the Autocomplete with Federated Search example code on GitHub. ## Before you begin This tutorial extends [Build a Query Suggestions UI with Autocomplete](/doc/ui-libraries/autocomplete/guides/adding-suggested-searches). ## Combine different data sources With different indices for different content types, you can optimize the relevance for each type. For example, blog posts might require a different ranking strategy than products. Federated search can search multiple indices simultaneously and show the results in the same interface. You can combine data sources in four different ways: | Data sources | Example | | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Two or more Algolia indices** | One index for Query Suggestions, another for products, and another for a blog. Each index has different data types, data structures, and ranking strategies. | | **One Algolia index with different filters** | You can apply filters to contextualize and get extra data sets from the same index. For example, if your index has both movies and books, you can query a single index twice: one query with a filter for "movies" and the second query for "books". | | **One Algolia index and filter values from the same index** | In a "product" index, you can have a set of category filters. You can apply these category filters and return relevant category values. | | **One Algolia index and third-party data** | You can search both an Algolia index and a third-party API asynchronously. For example, you can search into an Algolia index of restaurants and get a list of nearby addresses using the Google Places API. | ## Implement federated search You can add multiple data sources to Autocomplete with [`getSources`](/doc/ui-libraries/autocomplete/core-concepts/sources). In this tutorial, Autocomplete uses these data sources: * **Query Suggestions** from the index `instant_search_demo_query_suggestions` * **Product catalog** from the index `instant_search` * **Hierarchical product categories** from `instant_search` ### Add Query Suggestions as first data source Follow the steps in [Adding Query Suggestions](/doc/ui-libraries/autocomplete/guides/adding-suggested-searches#add-query-suggestions) to set up [`autocomplete-plugin-query-suggestions`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions). ### Add search results for products as second data source First, import [`getAlgoliaResults`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/getAlgoliaResults) from the `autocomplete-js` package to get results from an Algolia index. ```js JavaScript icon=code theme={"system"} import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js"; ``` Next, use `getSources` and `getAlgoliaResults` to get matching products from the Algolia index `instant_search`. This example uses custom rendering with [Preact](https://preactjs.com/) components. ```jsx JavaScript icon=code theme={"system"} // ... autocomplete({ // ... // Add the product display getSources({ query, state }) { if (!query) { return []; } return [ { sourceId: "products", getItems() { // Get the products from an Algolia index return getAlgoliaResults({ searchClient, queries: [ { indexName: "instant_search", params: { query, hitsPerPage: 3, attributesToSnippet: ["name:10"], snippetEllipsisText: "…", }, }, ], }); }, // Control how products are shown in Autocomplete templates: { // Show `Products` before the search results header() { return ( Products
); }, // Control the rendering of the actual product item({ item, components }) { return ( // This Preact component is defined below ); }, // Display this text when no products match the query noResults() { return "No products for this query."; }, }, }, ]; }, }); // A Preact component to render a product item with an image on the left and // product details on the right function ProductItem({ hit, components }) { return (
{hit.name}
From {hit.brand} in{" "} {hit.categories[0]}
{hit.rating > 0 && (
{Array.from({ length: 5 }, (_value, index) => { const isFilled = hit.rating >= index + 1; return ( ); })}
)}
${hit.price.toLocaleString()}
); } ``` ### Add product categories as third data source To add categories to the federated search, import [`getAlgoliaFacets`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/getAlgoliaFacets) from `autocomplete-js`. ```js JavaScript icon=code theme={"system"} import { autocomplete, getAlgoliaResults, getAlgoliaFacets, } from "@algolia/autocomplete-js"; // ... ``` Now add `getAlgoliaFacets` to `getSources` to add the product categories: ```jsx JavaScript icon=code theme={"system"} // ... autocomplete({ // ... getSources() { return [ { // The source for the products // ... }, { sourceId: "productsCategories", getItems({ query }) { // Use the product categories as facets return getAlgoliaFacets({ searchClient, queries: [ { indexName: "instant_search", facet: "hierarchicalCategories.lvl1", params: { facetQuery: query, maxFacetHits: 2, }, }, ], }); }, // Control the rendering of the product categories templates: { header() { return ( // Show 'Product Categories' before the actual categories Products Categories
); }, item({ item }) { return
{item.label}
; }, }, }, ]; }, }); ``` ## Next steps Beyond this example, you can [add more data sources](/doc/ui-libraries/autocomplete/guides/including-multiple-result-types). To make your data sources reusable and shareable, encapsulate them as plugins. For more information, see [Build your own plugin](/doc/ui-libraries/autocomplete/core-concepts/plugins#build-your-own-plugin). You can also add more features, such as: * **Merchandising.** Use [Rules and merchandising](/doc/guides/managing-results/rules/merchandising-and-promoting) to promote queries or items in the empty-search state or no-results state. * **Personalization.** Use Algolia's [personalization](/doc/guides/personalization/classic-personalization/what-is-personalization) feature to enhance Query Suggestions or products. * **Dynamic Re-ranking.** Let Algolia's [Dynamic Re-ranking](/doc/guides/algolia-ai/re-ranking) feature boost popular Query Suggestions or products. ## See also * [What's federated search? (blog)](https://www.algolia.com/blog/ux/what-is-federated-search/) * [Best practices for federated search (blog)](https://www.algolia.com/blog/product/best-practices-for-federated-search/) * [Autocomplete works best with federated search (blog)](https://www.algolia.com/blog/ux/autocomplete-how-search-suggestions-increase-conversions/)