WooCommerce Predictive Search and Backbone js



WooCommerce Predictive Search Version 2.3.0 is now released into the wild. This is a very special new version with a complete rebuilt of all the Predictive Search box functions and the All Results Search pages in backbone.js. Not only now are all front end functions backbone MVC functions, those functions are no longer called with admin-ajax.php but are parsed through the WooCommerce JSON RESTful API. You do not have to have the API activated on your WooCommerce settings. Predictive Search auto connects via the Legacy API.

Faster Load times.

Backbone coupled with the WooCommerce JSON REST API means Predictive Search now has more features (and more to come) but actually uses less of your server resources. Before and after tests of average load time on a development server show a 28% reduction is milliseconds – pre backbone test showed average load time of 0.077 millisecond. After upgrade that same test came back at 0.055 milliseconds.

New Performance Feature

You will see on your WooCommerce Predictive Search admin dashboard a new menu tab has been added [ Performance]

new ps performance setting

The new Performance settings enable you to tweak how Predictive Search Responds to user input. If you have a every big database of products, posts, pages and or an underpowered server you can use these settings to substantially restrict the number of queries performed to the database for each search.

Characters Before Query

This is the number of characters that must be typed before a search query begins. Setting this anything above 1 will save you queries to your database by a factor of however many products, posts and pages you have on your site. Example – you a total of 1,000 products, pages and posts. Set at 1 and Predictive Search will query the entire database each time a letter is typed. Set at 2 and no search queries happen until the second character is typed. Or set at 3, not until the 3rd character is typed. Then Predictive Search does 1 query run for the 3 character set.

You can see how that would help any server that is underpowered or on very large databases. Interestingly we are pretty confident that we can use this to add a ‘Search Content’ feature. It would have a preset of possibly 5-6 Characters before search, which means that it would be searching for a word or a well formed word – I Query run.

Query Time Delay

Another nice performance tweak. Previously if someone speed type ‘cattle’ in under 1 second – predictive search would run 6 full query runs on the database 1.c, 2. a, 3. t., 4. t, 5. l, 6.3 to find the match all along the string. With Query Time Delay set at say 1.2 seconds – and the word is typed under that – Predictive Search will run 1 query for the ‘cattle’ word.

New All Results Search Pages SPA

The Results Search Page is now a SPA (Single Page Application). Single Page application means that the page does not reload when an event is clicked, but instead the new content loads within the page. Do a search that you know with bring up results of different search types. example


Click on the ‘Sort Search Results by’ options and you will see that instead of the page reloading with the next set of results – a nice little pop-up shows ‘Fetching search results..’ and then the results show. The ‘Fetching Search results …’ pop-up is another nice little feature in that it shows when the results page first loads and when loading sort results for the first time.

fetching results

Loading the results on page (SPA) is a really nice UI and good for server performance as the WordPress core does not reload – as it does every time a new page loads.

Cannot be Cached – bye bye -1 errors.

The good news is that the WooCommerce Predictive Search box loaded by backbone can never be cached regardless of what you use. This means no more -1 errors showing instead of results in the drop-down which is caused by some caching plugins. Easily fixed by clearing the cache – but annoying.

New Super fast cross browser Caching Feature

WooCommerce Predictive Search now creates a cache of all results in search box drop-down and all results search pages using backbone.localstorage. This stores the cache on the users local machine instead of in their browser.  This means if the user changes browser on their machine the cache exists – cross browser. Local.storage caching is super fast and takes all the weight off your server resources because cached resources are pulled from the users machine instead of fresh queries on your database.

Advanced Technology.

The new WooCommerce Predictive Search plugin is now cutting edge technology. There is only 1 other WooCommerce plugin that is built in backbone.js utilizing the baked in WooCommerce JSON RESTful API.  Enjoy the advanced features of the new v2.3.0 Predictive Search.