skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

search-autocomplete

Implement typeahead product and category suggestions with fuzzy matching.

14|3|Updated Mar 22, 2026
Search Tags:#accessibility#search#autocomplete#elasticsearch#algolia#merchandising#typeahead
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill search-autocomplete-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: search-autocomplete
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/search-autocomplete
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill search-autocomplete-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shoppers struggle to find products quickly using static search inputs, leading to high abandonment and low search-to-purchase conversion. This Skill introduces a live, typeahead autocomplete experience with fuzzy matching and category-aware suggestions to surface relevant results as users type.

Core Features & Use Cases

  • Instant suggestions with fuzzy matching: Debounced client input, server-side fuzzy search (Algolia/Elasticsearch/Typesense), and typo tolerance to return relevant results for common misspellings.
  • Merchandising and ranking: Support for boosts, pins, synonyms, and optionalFilters to promote featured or in-stock items and surface seasonal collections.
  • Accessible, production-ready frontend and backend: ARIA combobox patterns, AbortController request cancellation, LRU caching, multi-index queries (products + categories), and zero-results logging for analytics.
  • Use Cases: Add a polished autocomplete dropdown to Shopify or WooCommerce with minimal configuration, or implement a headless Algolia-backed typeahead for custom storefronts.

Quick Start

Add an Algolia-backed typeahead to your storefront that displays product and category suggestions with fuzzy matching and a "View all results" escape link.

Frequently Asked Questions about search-autocomplete

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add typeahead autocomplete to a Shopify or WooCommerce storefront?▼

Typeahead autocomplete can be added to Shopify or WooCommerce by implementing a debounced frontend dropdown that queries a backend search index to display instant product and category suggestions as users type.

How does fuzzy matching work in an Elasticsearch or Algolia autocomplete component?▼

Fuzzy matching in autocomplete components works by configuring server-side typo tolerance in Algolia or Elasticsearch, returning relevant product results even when shoppers misspell search queries.

Can I implement an accessible ARIA combobox for headless search autocomplete?▼

An accessible ARIA combobox for headless search autocomplete is supported by this Skill, ensuring frontend dropdowns meet accessibility standards while maintaining instant typeahead product discovery functionality.

What is the best way to configure merchandising boosts and pins in an autocomplete dropdown?▼

Merchandising boosts and pins in an autocomplete dropdown are configured using optionalFilters and synonyms to promote featured, in-stock, or seasonal items at the top of typeahead product suggestions.

How do I handle zero-results logging and request cancellation for search autocomplete?▼

Zero-results logging and request cancellation for search autocomplete are handled by tracking empty query responses for analytics and using AbortController to cancel outdated debounced requests automatically.

Does this autocomplete implementation support multi-index queries for products and categories?▼

Multi-index queries for products and categories are fully supported, allowing the autocomplete component to fetch and display both product matches and category suggestions simultaneously within a single typeahead dropdown.

Related Skills

Explore More Software Engineering Skills→
patrykkopycinskipatrykkopycinski
6

migrate-from-algolia

Migrate Algolia indices and records to Elasticsearch with mappings and analyzers.

Community
Intermediate
finsilabsfinsilabs
44

merchandising-rules

Automate product ranking and collection curation with merchandising rules and manual overrides.

Official
Intermediate
VollliebVolllieb

nextjs

Guide Next.js App Router development with server components and data fetching.

Community
Advanced
finsilabsfinsilabs
44

search-autocomplete

Implement typeahead search with fuzzy typo matching for e-commerce storefronts.

Official
Intermediate