A live search is a search form that displays the results for your search query as you type. When done right, they can be exceptionally nice to use, and going through the process of building one covers a lot of really important techniques that can be applied to many other areas as well. This in-depth video tutorial will walk you through the process of creating a live search field within the WordPress dashboard.
The video is pretty lengthy, but I hope you can stick with me through it all because there are some really great techniques demonstrated. In the video, I create a live search form for the WordPress user database, and integrate it into my Restrict Content Pro plugin. Using my plugin as an example works really well because it gives some context to what is being built, though the code itself can be applied to anything.

Please note that this is an advanced tutorial. If you are not familiar with how to load scripts in WordPress correctly, or how to use ajax within WordPress, please read / follow the tutorials below:

  1. stomp

    Excellent tutorial, was actually good you stumbled across problems as those are the problems other people have too.

    I was wondering – if the username doesn’t relate to the person’s name and therefore you wanted to search by display name (most likely to be their first name and last name) how would you get their ID following the search?

    So just to elaborate. Your username is wpguru, however I want to be able to find your name by searching for ‘Pippin’. Is it possible to do this?

    Cheers!

    • Pippin

      Thanks! I think demonstrating the actual errors, and solving them live, really helps people learn.

      It would be possible to search for users by the first, last, or display name, but you would have to write a custom function and SQL query. The get_users() function does not support searching any of those fields. It only searches ID, email, and username.

  2. philderksen

    Thanks for the in-depth tutorial Pippin. It’s definitely good to see real world debugging even if it’s for a variable name typo here and there.

    If I’m not mistaken the entire jQuery UI library is included in WP core so you could use their autocomplete widget for a different style.

    http://jqueryui.com/demos/autocomplete/

    I definitely want to experiment with different live search scenarios both on the admin and public sides.

    • Pippin

      Yes, the UI library is included in core. Using that would definitely be a good idea. I actually had not thought of that at all when I put this together. The counter argument to using jQuery UI is that it’s good to know how to do it yourself 🙂

  3. Anton

    hey pippin, i was just checking out the ‘live search’ example video and noticed a little something that could improve usability – you may have already fixed it but here it goes.
    The live results that appear in the grey box seems to be pushing the rest of the content down.
    i would recommend making that results box position:absolute just in case you have many matches when you’re doing a live search which in turn would push everything off the page.
    Great plugins by the way

    • Pippin

      You’re definitely right, that would be a good improvement.

  4. 5t3ph

    Pippin,

    This couldn’t have come at a better time! Implementing this idea for my example app that I’ll use for my WCKC talk 🙂

    One addition I made was to check if the input value had length >= 2 because otherwise when you delete the field value it lists all users, thanks to the otherwise very useful wildcard.

    Look forward to meeting you this weekend!

    • Pippin

      Awesome!

      I’ve been looking forward to your talk all week 🙂

      Checking that the input length is greater than 2 is probably a good idea all the way around. It helps to reduce the number of queries that are made.

      See you soon!

  5. chrismccoy

    nice tutorial, i did a live search in my ajax version of twentyeleven 😉

  6. jgalea

    How would you do it if you were loading posts not users? get_users() has the convenient wildcard, but not sure how that would work in the case of searching for posts.

    • Pippin

      I would use WP_Query and pass the search parameters: https://gist.github.com/2023628 (line 166). The posts search isn’t as powerful as the users (no wild card that I know of), but it’s basically the same approach.

    • jgalea

      Thanks, that wildcard was really useful though, wish we could do something like that with posts.

    • Pippin

      That would make all of our lives much easier.

  7. lazerbri

    hiya very cool but you used url: ajaxurl for use in the admin areas is there a magic url I could use if i wanted a to us on the front end? :))

    • lazerbri

      ummm I found the answer:) Process Ajax Requests Correctly in WordPress Plugins many thanks you a life saver very cool

  8. Pam

    Need this, big time! How can I get access? 🙂

  9. Gerald

    Pippin,
    please, is it possible to get a copy of the files and codes you wrote in the video?
    I`m lazy and don’t want to watch the 1h video again to grab the codes 🙂

    • Pippin

      I don’t think I have them anymore, sorry.

  10. Gerald

    Btw: there is a plugin which does search in titles only (wildcard issue you mentioned) “dave’s live search” but that plugin is bloated with lots of stuff and I like to keep it clean.
    Thanks for the great video.

  11. Punal Chotrani

    Hi There,
    I’m having trouble viewing the tutorial.

    Will it be possible to download it from somewhere?

    • Pippin

      What browser are you using? I just checked and the video played fine for me.

  12. Punal Chotrani

    I have tried it on 3 different computers and on all 3 browsers, Chrome, Safari and Firefox.

  13. Sal

    Hi.
    Can I use it as a popup search effect with the data i.e models of smartphones etc. ?
    Thank you.

  14. massoud sh

    Hi There,
    i pay money to viewing this tutorial but I do not see anything .
    please help me .

    • Pippin

      Is the video not playing for you?

  15. massoud sh

    no . I do not see anything .

    • Pippin

      What browser are you using?

    • massoud sh

      chrome .

    • Pippin

      I just tested and it works fine for me . . . . do you see the video player at all?

    • massoud sh

      no i can’t see .

    • Pippin

      Try again now.

  16. Punal Chotrani

    Hey Pippin,

    I have the same problem on my end aswell.

    The video playback is very bugy. If i were you i wouldn’t use sublime video encoder.

    If you can help, that would be great, or i feel i’m just wasting my money on your site.

    Thanks

    • Pippin

      I’ve been migrating all videos over to vimeo. I stopped using the Sublime player quite a while ago, but since there are a large number of videos, it takes time to move them all.

      I’ll get this one moved over tomorrow.

    • Pippin

      The video has been moved to Vimeo and should be available above within 20 minutes.

  17. Dragan Milunovic

    thank you, Pippin

Comments are closed.