Auto complete for search boxes

jerrydol
Tourist
6 0 1

Hi, 

I am looking to get autocomplete setup on my search bars within my shop. 

I found this tutorial, and implemented it as it says, however it is not working, nothing gets autocompleted on any search bar on the site- I think it may be quite old and was written before the updates/changes to Minimal/Shopify search functionality.

https://help.shopify.com/themes/customization/store/enable-autocomplete-for-search-boxes

I am running the Minimal theme.

Is there anyone else who has wanted to implement search autocomplete who couldn't, or anyone who has done it successfully.

0 Likes
Daryoush_Shabah
Shopify Staff (Retired)
Shopify Staff (Retired)
235 0 25

Hey Jerry!

I'm Daryoush, on the Guru team here at Shopify! :)

The autocomplete for the search box should work as intended as long as it was customized the same way according to that Shopify Doc. Since it's not a customization supported by Shopify, our Theme Support team is unable to investigate I'm afraid. However, you can definitely implement this by using a 3rd party app, we have several of them. For my own website, I personally use the "Instant Search +" app and it works great! There are a whole host of features it offers and in my opinion, looks much more professional.

- Instant Search +
- Smart Search & Instant Search
- Omega Instant Search
- Live Search

I hope this helps and have a lovely day!

Cheers,
Daryoush

0 Likes
jerrydol
Tourist
6 0 1

Hi Daryoush, thanks for your reply; totally understand that, I was hoping to get other people in this situation, or maybe someone a bit more skilled at ajax/jQuery than myself who likes problem solving.

I have an open Stack Overflow question in also which details my problem and what I've tried; for some reason the jQuery isn't picking up the form[action=/search] and then doing the other bits but can't figure out why. Hopefully someone else may stumble across this.

I will press on trying to solve it myself until I get more replies.

https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify

EDIT:

I got it working! :) with a few adjustments.

To fix the jQuery undefined error I replaced the first line of jQuery of the search-autocomplete.liquid with: window.onload = (function() {

For some reason the results list was getting a display:block from somewhere, but I couldn't find it, so using jQuery I changed this to block which made it appear. Also in this code line I modified the term.length to start ajax requests on 2, else if you typed cat/dog you would need to then type another letter, or a space to start the search.

// If that's a new term and it contains at least 2 characters.

if (term.length > 2 && term != $(this).attr('data-old-term')) {

$('<ul class="search-results"></ul>').css( { 'display': 'block'} )

The search results now show up, and all correct! Just needs a bit of CSS adjustments for positioning.

Craftshift
Shopify Partner
12 0 2

We noticed all existing search apps auto complete after user types but non of them actually suggest users what they can search in store. Actually most of visitors don't know what they can search.

We decided to make an app which will show search suggestions before user start typing. Then they can see search suggestions and search based on it. This app is not an alternative to existing search apps. It is more helpful when you use it together with autocomplete app. Since it is new app I made price very low at beginning. Just $0.99

https://apps.shopify.com/dynamic-search-placeholder?soruce=shopify_forum

Shopify App Developer https://apps.shopify.com/partners/craftshift
0 Likes

Hi @jerrydol, I made a video tutorial for you on how to get autocomplete setup on my search bars. Hope this helps https://www.askquesty.com/post/autocomplete-search-bars-shopify-tutorial

0 Likes