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:
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
Need this, big time! How can I get access? 🙂
You can join the site here: https://pippinsplugins.com/join-the-site/
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 🙂
I don’t think I have them anymore, sorry.
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.
Hi There,
I’m having trouble viewing the tutorial.
Will it be possible to download it from somewhere?
What browser are you using? I just checked and the video played fine for me.
I have tried it on 3 different computers and on all 3 browsers, Chrome, Safari and Firefox.
Hi.
Can I use it as a popup search effect with the data i.e models of smartphones etc. ?
Thank you.
Hi There,
i pay money to viewing this tutorial but I do not see anything .
please help me .
Is the video not playing for you?
no . I do not see anything .
What browser are you using?
chrome .
I just tested and it works fine for me . . . . do you see the video player at all?
no i can’t see .
Try again now.
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
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.
The video has been moved to Vimeo and should be available above within 20 minutes.
thank you, Pippin