"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface SearchSuggestion {
  id: string;
  label: string;
  description?: string;
}

export interface SearchAutocompleteProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onSelect"> {
  suggestions?: SearchSuggestion[];
  value?: string;
  onChange?: (value: string) => void;
  onSelect?: (suggestion: SearchSuggestion) => void;
  loading?: boolean;
  emptyMessage?: string;
}

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  );
}

function LoaderIcon({ className }: { className?: string }) {
  return (
    <svg
      className={cn("animate-spin", className)}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
    </svg>
  );
}

export const SearchAutocomplete = React.forwardRef<
  HTMLInputElement,
  SearchAutocompleteProps
>(
  (
    {
      className,
      suggestions = [],
      value,
      onChange,
      onSelect,
      loading = false,
      emptyMessage = "No results found",
      placeholder = "Search...",
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = React.useState("");
    const [isOpen, setIsOpen] = React.useState(false);
    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
    const containerRef = React.useRef<HTMLDivElement>(null);
    const inputRef = React.useRef<HTMLInputElement>(null);
    const listRef = React.useRef<HTMLUListElement>(null);

    const searchValue = value !== undefined ? value : internalValue;

    const updateValue = React.useCallback(
      (nextValue: string) => {
        if (value === undefined) {
          setInternalValue(nextValue);
        }
        onChange?.(nextValue);
      },
      [onChange, value]
    );

    React.useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (
          containerRef.current &&
          !containerRef.current.contains(event.target as Node)
        ) {
          setIsOpen(false);
          setHighlightedIndex(-1);
        }
      };

      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    React.useEffect(() => {
      setHighlightedIndex(-1);
    }, [suggestions]);

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      updateValue(e.target.value);
      setIsOpen(true);
    };

    const handleSelect = (suggestion: SearchSuggestion) => {
      updateValue(suggestion.label);
      onSelect?.(suggestion);
      setIsOpen(false);
      setHighlightedIndex(-1);
      inputRef.current?.blur();
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (!isOpen) {
        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
          setIsOpen(true);
          return;
        }
      }

      switch (e.key) {
        case "ArrowDown":
          e.preventDefault();
          setHighlightedIndex((prev) =>
            prev < suggestions.length - 1 ? prev + 1 : 0
          );
          break;
        case "ArrowUp":
          e.preventDefault();
          setHighlightedIndex((prev) =>
            prev > 0 ? prev - 1 : suggestions.length - 1
          );
          break;
        case "Enter":
          e.preventDefault();
          if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
            handleSelect(suggestions[highlightedIndex]);
          }
          break;
        case "Escape":
          setIsOpen(false);
          setHighlightedIndex(-1);
          break;
      }
    };

    const showDropdown = isOpen && (suggestions.length > 0 || loading || searchValue.length > 0);

    return (
      <div ref={containerRef} className={cn("relative w-full", className)}>
        <div className="relative">
          <SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <input
            ref={(node) => {
              inputRef.current = node;
              if (typeof ref === "function") {
                ref(node);
              } else if (ref) {
                ref.current = node;
              }
            }}
            type="text"
            role="combobox"
            aria-expanded={showDropdown}
            aria-haspopup="listbox"
            aria-autocomplete="list"
            aria-controls="search-suggestions"
            value={searchValue}
            onChange={handleInputChange}
            onFocus={() => setIsOpen(true)}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            className={cn(
              "w-full rounded-lg border border-border bg-background py-3 pl-10 pr-10 text-sm text-foreground",
              "placeholder:text-muted-foreground",
              "transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
            {...props}
          />
          {loading ? (
            <LoaderIcon className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          ) : null}
        </div>

        {showDropdown ? (
          <ul
            ref={listRef}
            id="search-suggestions"
            role="listbox"
            className="absolute z-50 mt-2 max-h-64 w-full overflow-auto rounded-xl border border-border bg-card p-1 shadow-lg"
          >
            {loading ? (
              <li className="px-3 py-2 text-sm text-muted-foreground">
                Loading...
              </li>
            ) : suggestions.length > 0 ? (
              suggestions.map((suggestion, index) => (
                <li
                  key={suggestion.id}
                  role="option"
                  aria-selected={highlightedIndex === index}
                  onClick={() => handleSelect(suggestion)}
                  onMouseEnter={() => setHighlightedIndex(index)}
                  className={cn(
                    "cursor-pointer rounded-lg px-3 py-2 transition",
                    highlightedIndex === index
                      ? "bg-muted text-foreground"
                      : "text-foreground hover:bg-muted"
                  )}
                >
                  <p className="text-sm font-medium">{suggestion.label}</p>
                  {suggestion.description ? (
                    <p className="text-xs text-muted-foreground">
                      {suggestion.description}
                    </p>
                  ) : null}
                </li>
              ))
            ) : searchValue.length > 0 ? (
              <li className="px-3 py-2 text-sm text-muted-foreground">
                {emptyMessage}
              </li>
            ) : null}
          </ul>
        ) : null}
      </div>
    );
  }
);

SearchAutocomplete.displayName = "SearchAutocomplete";
Search Autocomplete

Dependencies

Files

Installation
