How to enable autocomplete for search boxes in shopify

With this tutorial, I will show recommendations as your visitor types in your storefront search box. Your visitors will be able to jump directly to any product page with a single click.

Create an alternate search template

1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

      2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

      3. Right under Templates on the left, click on “Add a new template”. Create a new template for     “search” called “json”:

    4. Replace the entire content of your new template with the code located here. You will end up with this:

    5. Save your file.

Create a snippet 

1. Still on the Edit HTML/CSS page, right under Snippets on the left, click on “Add a new snippet”. Create a new snippet called “search-autocomplete”: 
     
   2. To your new search-autocomplete.liquid snippet, add the following code. 
   
   
   3. Save your snippet file.
   
   
   4. Back on the Edit HTML/CSS page, right under Layouts on the left, click on theme.liquid. Scroll down to the bottom of the file, and add the following right above the closing </body> tag: 
   
   

   
   {% include 'search-autocomplete' %}
   
   
   
    
   
   

            5. Save File


source : help.shopify.com

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.