New WP Live Search Plugin Utilizes the WP REST API

Yesterday Nick Haskins, creator of Aesop Story Engine, released a new search plugin for WordPress. WP Live Search utilizes the new WP REST API, in combination with Backbone.js and Underscore.js, to deliver live search results as the user types in a search query. The result is instantaneous searching that doesn’t require pressing enter or refreshing the page.

WP Live Search is very much a working prototype but also provides a practical example of the WP REST API in action. I tested the plugin and the short clip below shows an example of searching through thousands of articles. Each result is displayed neatly with its corresponding featured image.

wp-live-search

Haskins created the client-side search plugin to power the new search feature inside Lasso, his frontend editing plugin. He released the prototype on WordPress.org in order to get usability testing and feedback from a larger group of users. He’s also building the plugin as part of his day job, so it’s being developed with several different audiences in mind.

“Using the REST API was super important because we’re searching on ‘keyup’ and if that went through admin-ajax.php then shared hosts would likely melt down,” Haskins said. “So because it’s all client-side, it’s super lightweight and anything can run it.”

The feature is already built into Lasso but will not be released until Haskins has the chance to gather more feedback.

“I’m interested to see HOW users search, is the search too fast, is it too slow, etc.,” he said. “All of this will lead to a perfect search feature inside of Lasso.”

Haskins was previously hesitant to utilize the WP REST API before it has landed in WordPress core but the recent progress and momentum on the project inspired him to go for it.

“I was avoiding the REST API, but with a tentative merge this fall, and V2 going out, I think the time is ripe,” he said. “In using the REST API, I’ve learned that it’s very use case dependent and is really just another tool. There’s a time and place for it.”

WP Live Search is still under active development and may not be suitable for use in production just yet, but is functional and ready for testing. Here’s how to take it for a spin:

  1. Install WP Live Search.
  2. Install the official WP REST API plugin.
  3. Add the shortcode [wp_live_search] to a page.

The shortcode accepts a few attributes, including type, placeholder, results, and target. More details are available on the plugin’s description page.

Haskins plans to add support for custom post types in the next major update to the plugin. If you’re interested in contributing, you can find WP Live Search on GitHub.

9 Comments


  1. I like how this looks a lot, I hope Haskins continues to work on it. I’d like to be able to incorporate it into my theme’s search, but as a WordPress novice, I’m not sure if that’d even be doable yet (or perhaps Haskins is already working on it.)

    Report


    1. Thanks Joe! All you have to do is make a page called search and put the shortcode on the page. It’s just that simple! I’m also introducing a “compact” mode so that it can fit within a heading area like the search here on WP Tavern.

      And, custom post type support was released yesterday.

      Report


  2. Hi Nick, awesome plugin you got here mate :) I am trying it out already on my site.

    I have a few questions for you:

    – How do you search for everything? Meaning posts, pages, CPT’s, all together? I would like to replace wordpress search with your plugin.

    – Searching trough custom post types doesn’t work very well. It just lists all instances of my CPT in the results, regardless of their relevance. Altering the search string also doesn’t change the results, so I think something is not working correctly there :)

    – Also one post of my CPT is never visible in the results, despite it’s a normal published post like all others.

    Again thanks for writing this great plugin. I hope some day I can use it to replace WP search with it :)

    Cheers!

    Report


    1. I’ll update the docs to include examples of searching for multiple.

      Searching through post types works just fine, in this example I passed “type=”ideas”” and its returning the first 20 results found for the “ideas” post type. http://cl.ly/image/3j3d1k2e3W1A

      It returns whatever the REST API returns, which theoretically returns the same result as yoursite.com?s=test

      You can test the REST API response this by appending the following to your sites url in your browser bar:
      wp-json/posts?type=MYPOSTTYPE&filter[s]=test

      Report


      1. Thanks for the reply Nick :) I have created a bugreport on your github page. Let us continue discussion there :)

        Cheers!

        Report


  3. Fast response from Nick on Github, issue is fixed already. Great Plugin :)

    Report


  4. Great Plugin. Would like do do some penetration testing on it before installing though.

    Report


  5. Started playing with this one a couple of sites, and I’m nearly giddy about how easy it seems to work. I’m curious about how it performs on a couple of sites with 10 years and several dozen thousand posts each.

    Enable shortcodes in widgets + replace default Search widget = Joy!

    Report


    1. Awesome to hear Summer!! So glad you’re enjoying it. You can definitely enable shortcodes in widgets with a simple filter, but sometimes themes will enable this, so we leave that to them.

      It should work super fast with lots of posts! It will return the results as fast as the REST API on your site can return them. The API just does a normal search query behind the scenes, so “theoretically” it should be as fast (it not faster) than searching for a normal post.

      Report

Comments are closed.