AutoComplete or Type-ahead Search

[Dan Cole]

I'm thinking about ways to improve my autocomplete or type-ahead search box and wondered if anyone who is using feature, has already done so.  I received some customer feedback suggesting it is confusing and they are of the opinion that they need to select from the autocomplete suggestions and can't simply enter a search term.  As I pondered that I thought I'd google for the "best practices" when using an autocomplete search and came up with some informative posts...this is one of them.

http://baymard.com/blog/autocomplete-design

For starters I'm thinking that I should add the words "Search Suggestions" to the top of the suggestion list, similar to what Amazon does.

What if any changes have you made?  

Dan

[♥Tsimi]

I think @@auzStar created an Addon with similar feature.

 

http://www.oscommerce.com/forums/topic/408210-addon-twitter-typeahead-autocomplete-search-for-osc-234-bs-and-nonbs/

 

http://addons.oscommerce.com/info/9351

 

The only downside I could find until now is that it doesn't look within a product description but only the titles.

The stock osC search function can be extended to include search within the product description or even model numbers other then that the stock function sucks.

[Dan Cole]

@@Tsimi  Thanks Lambros...I already have an autocomplete / type-ahead search feature installed.  The one Gary made and released with his 28 days of coding contributions.  My issue is more about usability so I was looking for input on that.

 

I took a quick look at @auzStar contribution and I think I see an idea or two there that I can use so thanks for that.  Are you using that particular contribution or some other autocomplete / type-ahead search contribution and if so, did you modify it in anyway to make it more user friendly?

 

Dan

[♥Tsimi]

I don't use such feature in my shop.

I just installed auzstars addon into a local store once to see how it looks like.

I am not familiar with burts version so can't say anything about it.

 

I am sure someone else will come along and give you more feedback on that matter.

[♥raiwa]

@@Dan Cole,

 

I adapted the smart suggest add-on for BS and modified it to open the sected product instead to perform the search query.

http://addons.oscommerce.com/info/8926

 

Have a look on my store to see how it works:

http://www.sarplataygemas.com/

 

I can't publish it as it was part of a commercial job. Just to give the idea.

[♥raiwa]

Here is another source:

http://www.w3schools.com/php/php_ajax_livesearch.asp

[burt]

html5 -> datalist

[Dan Cole]

Have a look on my store to see how it works:

http://www.sarplataygemas.com/

 

@@raiwa  Rainer I tried to take a look but it doesn't seem to be working.  It looks like it is trying to generate the list but can't for some reason.

 

Dan

[♥raiwa]

@@Dan Cole,

 

Which browser you tried?? I just checked in chrome and firefox and it works for me. Needs at least 2 letters.

 

Edit: oohps, found the problem. There is no language support, results appear in spanish and I checked always in the default language spanish. I developed and tested in a one language store. I'll try to fix it the next days, Thanks for the report.

[♥raiwa]

@@raiwa  Rainer I tried to take a look but it doesn't seem to be working.  It looks like it is trying to generate the list but can't for some reason.

 

Dan

 

It's fixed. There was a problem with the language variable.

[♥Moxamint]

@@raiwa

 

I got this when visiting http://www.sarplataygemas.com/:

1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'ai-pei', 'Taipei', 'http://www.oscommerce.com/forums/topic/408553-autocomplete-or-ty' at line 1

INSERT INTO `supertracker` (`ip_address`, `browser_string`, `country_code`, `country_name`, `country_region`, `country_city`, `referrer`,`referrer_query_string`,`landing_page`,`exit_page`,`time_arrived`,`last_click`,`browser`) VALUES ('220.132.222.102','Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36','tw', 'Taiwan', 'T'ai-pei', 'Taipei', 'http://www.oscommerce.com/forums/topic/408553-autocomplete-or-type-ahead-search/', '','/','/index.php','2015-11-01 13:55:13','2015-11-01 13:55:13','Safari')

[TEP STOP]

[♥raiwa]

@@raiwa

 

I got this when visiting http://www.sarplataygemas.com/:

1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'ai-pei', 'Taipei', 'http://www.oscommerce.com/forums/topic/408553-autocomplete-or-ty' at line 1

INSERT INTO `supertracker` (`ip_address`, `browser_string`, `country_code`, `country_name`, `country_region`, `country_city`, `referrer`,`referrer_query_string`,`landing_page`,`exit_page`,`time_arrived`,`last_click`,`browser`) VALUES ('220.132.222.102','Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36','tw', 'Taiwan', 'T'ai-pei', 'Taipei', 'http://www.oscommerce.com/forums/topic/408553-autocomplete-or-type-ahead-search/', '','/','/index.php','2015-11-01 13:55:13','2015-11-01 13:55:13','Safari')

[TEP STOP]

 

The Problem seems to be here:

'T'ai-pei' the quote after the "T" is producing the error, no idea what produces this.

 

Although real visitors from Teipei are not important for my store it's interesting. I'll have a look on the supertracker. For now you may just try to reload the page.

[Dan Cole]

It's fixed. There was a problem with the language variable.

 

@@raiwa

 

Thanks Rainer....it's working but seems slow and not very responsive...maybe the distance is a factor.  In any event I'm not really looking for a contribution.  I started this thread to generate some discussion and hopefully get suggestions to make the experience a bit more user friendly.  I'm going to add a bit of a description (placeholder to the search box) and some text at the beginning of the suggestion list to make it clear that the autocomplete list are just suggestions.  Some of my customers seem to think that the autocomplete list that appears are the actual search results and don't realize they can do a more complete search if they enter the search term and hit enter...that is the issue I'm really trying to address.

 

Dan

[burt]

@@Dan Cole - I just tried the Auzstar contrib that @@Tsimi mentioned.  

Seems to work well, and does look nice.

I believe a native approach is better (datalist), but it's such early days for that spec that it's quite "basic" so far...

 

@@raiwa, sanitize that input ;)

 

https://xkcd.com/327/

[auzStar]

I think @@auzStar created an Addon with similar feature.

 

http://www.oscommerce.com/forums/topic/408210-addon-twitter-typeahead-autocomplete-search-for-osc-234-bs-and-nonbs/

 

http://addons.oscommerce.com/info/9351

 

The only downside I could find until now is that it doesn't look within a product description but only the titles.

The stock osC search function can be extended to include search within the product description or even model numbers other then that the stock function sucks.

 

@@Tsimi

 

Sorry for late reply. Been holidaying.

 

I wanted to create the add-on to function the same as the standard search box (search title, model, but only the manufacturer is optional in the add-on). The standard search box doesn't "search in description", whereas the advanced search does (as far as I can tell, correct me if I'm wrong). So when the drop down list appears you should get the same results (if the add-on manufacturer is on) as just searching straight from the search box. But if you search from advanced search (not using the search box) you will get more results.

 

cheers

[♥John W]

I've been using Auzstar's typeahead for a few months and it works pretty well.  I think it's pretty well thought out.  I did modify it a little to load in the footer scripts and inlined some to increase pagespeed.