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
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"
Additional parameters to refine the autocomplete results The total number of results to return across all sections Example: 10
Number of results to return per section. Keys are section names, values are numbers. Example: {
"Products" : 5 ,
"Search Suggestions" : 10
}
Key-value mapping of filters to refine results. The keys are filter names and values are the filter values. Example: {
"size" : "medium" ,
"color" : "blue"
}
Filters to apply per section. Keys are section names, values are filter objects. Example: {
"Products" : {
"brand" : "Nike"
},
"Search Suggestions" : {
"category" : "sports"
}
}
Array of hidden metadata field names to return in the response Example: ["metadata.internal_id", "metadata.cost"]
Faceting expression to scope autocomplete results. This is a complex filter expression for advanced filtering. See Collections configuration for details. Options to format different aspects of the response, such as controlling which fields are returned or how data is structured. See Autocomplete API documentation for available options. Additional query parameters to append to the request for results. This allows passing custom parameters to the API. Example: {
"custom_param" : "value"
}
Parameters relevant to the network request Request timeout in milliseconds. If the request takes longer than this, it will be aborted. Example: 5000 (5 seconds)
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"
}
]
}
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
}
Information about the request that generated these results The processed query string
Number of results requested
Features enabled for this request
Feature variants applied to this request
Items affected by searchandizing rules
The variations map used (if provided)
The pre-filter expression used (if provided)
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
});
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.