Skip to main content

Autocomplete

GET/api/v1/search/autocomplete

Overview​

Returns autocomplete suggestions based on prefix matching. Supports fuzzy matching for typo tolerance.

Use cases: Search-as-you-type UI, typeahead dropdowns, search suggestions.

Authentication​

Authorizationstringrequired

Bearer token in format: Bearer client_id:api_key:api_secret

Query Parameters​

prefixstringrequired

Search prefix for autocomplete. Min 1 character, max 50 characters.

sizeintegerdefault: 10

Number of suggestions to return. Range: 1-20.

Response​

successboolean

Whether the request was successful.

suggestionsarray

Array of autocomplete suggestions.

Examples​

Request Example

curl -X GET "https://spideriq.ai/api/v1/search/autocomplete?prefix=caf" \
  -H "Authorization: Bearer cli_xxx:key:secret"
curl -X GET "https://spideriq.ai/api/v1/search/autocomplete?prefix=tech&size=15" \
  -H "Authorization: Bearer cli_xxx:key:secret"

Response Example

{
  "success": true,
  "suggestions": [
    {"text": "Café Central", "score": 9.5},
    {"text": "Café du Commerce", "score": 8.2},
    {"text": "Cafeteria Luxembourg", "score": 7.8},
    {"text": "Café Brasserie", "score": 7.1},
    {"text": "Café Royal", "score": 6.5}
  ]
}

Implementation Example​

Here's how to implement autocomplete in a React application:

import { useState, useEffect } from 'react';
import { debounce } from 'lodash';

function SearchAutocomplete({ authToken }) {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const fetchSuggestions = debounce(async (prefix) => {
    if (prefix.length < 1) {
      setSuggestions([]);
      return;
    }

    const response = await fetch(
      `https://spideriq.ai/api/v1/search/autocomplete?prefix=${encodeURIComponent(prefix)}`,
      { headers: { 'Authorization': `Bearer ${authToken}` } }
    );
    const data = await response.json();
    setSuggestions(data.suggestions || []);
  }, 300);

  useEffect(() => {
    fetchSuggestions(query);
  }, [query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search businesses..."
      />
      {suggestions.length > 0 && (
        <ul className="suggestions">
          {suggestions.map((s, i) => (
            <li key={i} onClick={() => setQuery(s.text)}>
              {s.text}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}