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.
Tutorial Teaser
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:
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!
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.
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.
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
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
You’re definitely right, that would be a good improvement.
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!
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!
nice tutorial, i did a live search in my ajax version of twentyeleven
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.
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.
Thanks, that wildcard was really useful though, wish we could do something like that with posts.
That would make all of our lives much easier.
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?
)
ummm I found the answer:) Process Ajax Requests Correctly in WordPress Plugins many thanks you a life saver very cool