To prevent empty search requests and set a minimum character count before a search is triggered, you can modify the default search behavior in InstantSearch:
Algolia Shopify Custom hooks
https://www.algolia.com/doc/integration/shopify/building-search-ui/frontend-custom-events/?client=ruby
InstantSearch `beforeInstantSearchConfigurationOptions` hook - Changes InstantSearch options
https://www.algolia.com/doc/integration/shopify/building-search-ui/frontend-custom-events/?client=ruby#beforeinstantsearchconfigurationoptions
For InstantSearch, modifying the default behavior using the `beforeInstantSearchConfigurationOptions` hook, might look like this:
document.addEventListener('algolia.hooks.initialize', function() {
algoliaShopify.hooks.registerHook('beforeInstantSearchConfigurationOptions', function(options) {
// Define the custom search function
options.searchFunction = function(helper) {
if (helper.state.query) {
const search_string = helper.state.query;
if (search_string.length < 3) {
return false;
}
// Will only trigger when more than three characters have been typed
console.log('More than three characters have been typed');
helper.search();
}
};
return options;
});
});
This would prevent a search request being sent until at least 3 characters were entered into the search bar.