Algolia InstantSearch UI

# Algolia InstantSearch UI

You are an expert in building fast, relevant search experiences with Algolia InstantSearch for React, Vue, and vanilla JavaScript applications.

## Key Principles
- Configure searchable attributes by priority
- Use custom ranking for business relevance
- Implement faceted navigation for filtering
- Add query suggestions for discovery
- Optimize for mobile search experiences

## Algolia Index Configuration
```javascript
// algolia-config.js
const algoliasearch = require("algoliasearch");

const client = algoliasearch("APP_ID", "ADMIN_API_KEY");
const index = client.initIndex("products");

// Configure index settings
await index.setSettings({
  // Searchable attributes in order of importance
  searchableAttributes: [
    "name",
    "brand",
    "description",
    "categories",
    "tags"
  ],
  
  // Attributes for faceting/filtering
  attributesForFaceting: [
    "searchable(brand)",
    "searchable(categories)",
    "filterOnly(price)",
    "filterOnly(in_stock)",
    "color",
    "size"
  ],
  
  // Custom ranking
  customRanking: [
    "desc(popularity_score)",
    "desc(rating)",
    "desc(reviews_count)"
  ],
  
  // Ranking formula
  ranking: [
    "typo",
    "geo",
    "words",
    "filters",
    "proximity",
    "attribute",
    "exact",
    "custom"
  ],
  
  // Highlighting
  attributesToHighlight: ["name", "description"],
  highlightPreTag: "<mark>",
  highlightPostTag: "</mark>",
  
  // Snippeting for long content
  attributesToSnippet: ["description:50"],
  
  // Typo tolerance
  typoTolerance: true,
  minWordSizefor1Typo: 4,
  minWordSizefor2Typos: 8,
  
  // Query suggestions
  enableRules: true,
  
  // Performance
  hitsPerPage: 20,
  paginationLimitedTo: 1000,
  
  // Distinct (deduplication)
  attributeForDistinct: "product_group_id",
  distinct: true
});
```

## React InstantSearch Implementation
```tsx
import React from "react";
import algoliasearch from "algoliasearch/lite";
import {
  InstantSearch,
  SearchBox,
  Hits,
  RefinementList,
  RangeInput,
  Pagination,
  Stats,
  Configure,
  Highlight,
  Snippet,
  useSearchBox,
  useHits
} from "react-instantsearch";

const searchClient = algoliasearch("APP_ID", "SEARCH_API_KEY");

function ProductSearch() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="products"
      insights={true}
      routing={true}
    >
      <Configure
        hitsPerPage={20}
        analytics={true}
        clickAnalytics={true}
        enablePersonalization={true}
      />
      
      <div className="search-container">
        <aside className="filters">
          <h3>Categories</h3>
          <RefinementList
            attribute="categories"
            limit={10}
            showMore={true}
            showMoreLimit={30}
            searchable={true}
            searchablePlaceholder="Search categories..."
          />
          
          <h3>Brand</h3>
          <RefinementList
            attribute="brand"
            limit={5}
            showMore={true}
            sortBy={["count:desc", "name:asc"]}
          />
          
          <h3>Price Range</h3>
          <RangeInput attribute="price" precision={0} />
          
          <h3>Color</h3>
          <RefinementList
            attribute="color"
            transformItems={(items) =>
              items.map((item) => ({
                ...item,
                label: (
                  <span>
                    <span
                      className="color-swatch"
                      style={{ backgroundColor: item.value }}
                    />
                    {item.label}
                  </span>
                )
              }))
            }
          />
        </aside>
        
        <main className="results">
          <SearchBox
            placeholder="Search products..."
            searchAsYouType={true}
            showLoadingIndicator={true}
          />
          
          <Stats
            translations={{
              rootElementText: ({ nbHits, processingTimeMS }) =>
                `${nbHits.toLocaleString()} results in ${processingTimeMS}ms`
            }}
          />
          
          <Hits hitComponent={ProductHit} />
          
          <Pagination
            padding={2}
            showFirst={true}
            showLast={true}
          />
        </main>
      </div>
    </InstantSearch>
  );
}

function ProductHit({ hit }) {
  return (
    <article className="product-card">
      <img src={hit.image_url} alt={hit.name} loading="lazy" />
      <div className="product-info">
        <h2>
          <Highlight attribute="name" hit={hit} />
        </h2>
        <p className="brand">{hit.brand}</p>
        <p className="description">
          <Snippet attribute="description" hit={hit} />
        </p>
        <div className="meta">
          <span className="price">${hit.price.toFixed(2)}</span>
          <span className="rating">⭐ {hit.rating}</span>
        </div>
      </div>
    </article>
  );
}
```

## Query Suggestions
```javascript
// Create suggestions index
const suggestionsIndex = client.initIndex("products_query_suggestions");

await suggestionsIndex.setSettings({
  searchableAttributes: ["query"],
  customRanking: ["desc(popularity)"],
  attributesToRetrieve: ["query", "popularity"],
  hitsPerPage: 8
});

// React Autocomplete component
import { autocomplete } from "@algolia/autocomplete-js";
import { getAlgoliaResults } from "@algolia/autocomplete-preset-algolia";

autocomplete({
  container: "#autocomplete",
  placeholder: "Search products...",
  openOnFocus: true,
  getSources({ query }) {
    return [
      {
        sourceId: "suggestions",
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: "products_query_suggestions",
                query,
                params: { hitsPerPage: 5 }
              }
            ]
          });
        },
        templates: {
          item({ item, html }) {
            return html`<div class="suggestion">${item.query}</div>`;
          }
        }
      },
      {
        sourceId: "products",
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: "products",
                query,
                params: { hitsPerPage: 4 }
              }
            ]
          });
        },
        templates: {
          item({ item, html }) {
            return html`
              <div class="product-suggestion">
                <img src="${item.image_url}" />
                <span>${item.name}</span>
              </div>
            `;
          }
        }
      }
    ];
  }
});
```

## Analytics and A/B Testing
```javascript
// Send click analytics
import { createInsightsMiddleware } from "instantsearch.js/es/middlewares";
import aa from "search-insights";

aa("init", { appId: "APP_ID", apiKey: "SEARCH_API_KEY" });

const insightsMiddleware = createInsightsMiddleware({
  insightsClient: aa
});

// Track conversions
aa("convertedObjectIDsAfterSearch", {
  eventName: "Product Purchased",
  index: "products",
  objectIDs: ["product-123"],
  queryID: hit.__queryID
});
```

## Best Practices
- Sort searchable attributes by relevance
- Use facet values for URL-based filtering
- Implement infinite scroll for mobile
- Add click analytics for ranking improvements
- Use synonyms for common misspellings
- Test search relevance with A/B testing