Skip to main content

Method Signature

getAutocompleteResults(query, parameters, networkParameters)
Retrieves autocomplete results based on a search query. Returns a Promise that resolves to an AutocompleteResponse object containing sectioned results.

Parameters

query
string
required
The search term to use for autocomplete suggestions. This is the text the user has typed into the search box.Example: "t-shirt", "running shoes"
parameters
object
Additional parameters to refine the autocomplete results
networkParameters
object
Parameters relevant to the network request

Response

Returns a Promise<AutocompleteResponse> that resolves to:
sections
Record<string, Item[]>
required
An object where keys are section names and values are arrays of items. Each item includes a result_id property.Common section names include:
  • "Products" - Product results
  • "Search Suggestions" - Suggested search queries
Example:
{
  "Products": [
    {
      "value": "Blue T-Shirt",
      "data": {
        "id": "prod123",
        "price": 29.99,
        "image_url": "https://example.com/image.jpg"
      },
      "result_id": "abc123"
    }
  ],
  "Search Suggestions": [
    {
      "value": "t-shirt men",
      "result_id": "abc123"
    }
  ]
}
result_id
string
required
A unique identifier for this set of results. This ID is automatically added to each item in the sections.Use this for tracking interactions with the results.
total_num_results_per_section
Record<string, number>
required
The total number of results available for each section (not just the number returned).Example:
{
  "Products": 150,
  "Search Suggestions": 8
}
request
object
required
Information about the request that generated these results

Examples

Basic Usage

Get autocomplete results for a simple query:
constructorio.autocomplete.getAutocompleteResults('t-shirt')
  .then(response => {
    console.log('Sections:', response.sections);
    console.log('Result ID:', response.result_id);
  })
  .catch(error => {
    console.error('Error:', error);
  });

With Results Per Section

Control how many results are returned for each section:
constructorio.autocomplete.getAutocompleteResults('t-shirt', {
  resultsPerSection: {
    Products: 5,
    'Search Suggestions': 10,
  },
});

With Filters

Apply filters to refine results:
constructorio.autocomplete.getAutocompleteResults('t-shirt', {
  resultsPerSection: {
    Products: 5,
    'Search Suggestions': 10,
  },
  filters: {
    size: 'medium',
    color: 'blue'
  },
});

With Filters Per Section

Apply different filters to different sections:
constructorio.autocomplete.getAutocompleteResults('shoes', {
  filtersPerSection: {
    Products: {
      brand: 'Nike',
      category: 'running'
    },
    'Search Suggestions': {
      popularity: 'high'
    }
  },
});

With Hidden Fields

Request additional metadata fields:
constructorio.autocomplete.getAutocompleteResults('laptop', {
  hiddenFields: ['metadata.cost', 'metadata.supplier'],
  numResults: 10
});

With Network Timeout

Set a custom timeout for the request:
constructorio.autocomplete.getAutocompleteResults(
  'phone',
  {
    numResults: 5
  },
  {
    timeout: 3000 // 3 seconds
  }
);

Processing Results

Example of processing the response:
constructorio.autocomplete.getAutocompleteResults('t-shirt', {
  resultsPerSection: {
    Products: 5,
    'Search Suggestions': 10,
  },
  filters: {
    size: 'medium'
  },
})
  .then(response => {
    // Access product results
    const products = response.sections.Products || [];
    products.forEach(product => {
      console.log(product.value, product.data);
    });
    
    // Access search suggestions
    const suggestions = response.sections['Search Suggestions'] || [];
    suggestions.forEach(suggestion => {
      console.log(suggestion.value);
    });
    
    // Check total available results
    console.log('Total products available:', 
      response.total_num_results_per_section.Products);
  })
  .catch(error => {
    if (error.message === 'query is a required parameter of type string') {
      console.error('Invalid query provided');
    } else {
      console.error('Request failed:', error);
    }
  });

Error Handling

The method will reject the Promise in the following cases:

Invalid Query

If the query parameter is missing or not a string:
constructorio.autocomplete.getAutocompleteResults(null)
  .catch(error => {
    // Error: query is a required parameter of type string
  });

Malformed Response

If the API returns a response without the expected sections property:
constructorio.autocomplete.getAutocompleteResults('query')
  .catch(error => {
    // Error: getAutocompleteResults response data is malformed
  });

Network Timeout

If the request exceeds the specified timeout:
constructorio.autocomplete.getAutocompleteResults(
  'query',
  {},
  { timeout: 100 } // Very short timeout
)
  .catch(error => {
    // Request timed out
  });

Event Tracking

When autocomplete results are successfully retrieved, an event is dispatched:
// Event name: 'autocomplete.getAutocompleteResults.completed'
// Event data: The full AutocompleteResponse object
This event can be used with the event dispatcher for analytics and tracking purposes.

Build docs developers (and LLMs) love