The live search effect is no novelty in desktop apps. In Mac OS X or Windows Vista/7, just type a few letters in a search box, and almost instantly you get the search results on the fly. Having to hit the submit button is becoming old school. This tutorial will show you how to bring this cool effect to the web world with jQuery. The code used in this tutorial is modified based on John Resig's approach. Join today!
Easily Implement a Live Search Effect: New Plus Tutorial
Aug 12th, 2009 in JavaScript & AJAX by Piao Yishi
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you'll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )SykeS August 12th
Another great Plus Tutorial which I want to read but I can’t because of credit card…
( )Jimmy Stell August 12th
Man will you people stop complaining? If you really wanted the Plus subscription, you would find a way instead bitching and moaning on here. please stop, it’s getting annoying.
( )Ulrik August 12th
If anything he is doing nettuts a favor by continuesly reminding them that they have paying customers waiting around, an unused market.. Which in the end could only lead to even better tutorials and more material from nettuts
Nathan Nash August 19th
+1
Envato is a business and they need to make money to sustain themselves. luckily they offer reasonable prices in comparison to other sites like Lynda
Josh August 13th
DOOOOOOOOD, payment is made by paypal. Add your bank card to your paypal account and VOILA!!!! you can buy plus.
This is exactly how I bought mine, I have my bank card connected to my paypal account…
geeez
( )Mike August 13th
Seriously, add your card to paypal, get the content. Not that difficult.
( )SykeS August 13th
The problem is… I don’t have credit card… So it’s difficult. But I have money on my paypal. Why I can’t simply send this 9 bucks to specified e-mail?
Ps. Thx Ulrik.
dingil August 12th
i want to pay with paypal is that possible?
( )Vasili August 12th
That’s how you would buy the membership.
( )Nahid August 12th
lol
Siddharth August 12th
Isn’t it easier to get the values from the server side using AJAX rather than having all the data on the client side?
( )Park August 12th
Yes, you’re definitely right. AJAX is great. But by putting everything on the client side, it’s as fast as a desktop app.
( )Nahid August 12th
Thanks park!
bb August 13th
i’m thinking on that maybe in real project it might be not the best idea to delay the query by time but how many characters the user types.
slow typing people would get the results like there wont be timeout.
instead of timeout we can check the char number and get back just the first 5 results from the array.
what do u guys think?
Juan C Rois August 12th
Great Tutorial, Thanks a lot Park for your contribution. Very useful for many purposes.
Keep up the good work.
( )EGY August 12th
Where I can get a coupon code to use when subsribing to the Plus section?
( )DataMouse August 13th
Coupon? Just pay the $9 – it’s not going to bankrupt you, is it?
( )Muhammad Adnan August 13th
ha ha ha !
EGY August 13th
I was thinking in the yearly subscription, not just in one month.
Tyler August 12th
I’m glad they are making more PLUS tutorials. I’m not signed up, and I never planned on it because they didn’t have many PLUS tutorials out.
They’ve always had some, but never enough that interested me enough to consider actually subscribing.
With this tutorial and the one a day or to ago both being relevant, I will have to consider signing up.
Of course, I would prefer everything just to be free, but it isn’t like that would actually happen. I’m glad they are starting to “force” me to subscribe to get some of the tutorials.
( )Dave August 13th
It’s worth it
( )aguaesolutions August 13th
i love jquery
( )thank you for this post
Benjamin Reid August 13th
How does the search work? Does it search through a SQL database?
( )Web010 August 13th
It’s client-side. Looking at the pic above it seems that the values are stored inside an array and then checked with javascript and the values that match the search term are shown.
( )Benjamin Reid August 13th
Won’t be signing onto PLUS for that then. Unless the values on the client side could be populated via a database.
Brandon Hansen August 13th
It would be just as easy to populate from a database. All that would have to be done is to run .ajax({}); and have the server return the exact same array.
The point of these tutorials is not to build a complete app for you and make you the best of the best. It is to give you an overview of programing techniques.
( )Benjamin Reid August 14th
Okay fair enough if it’s a free tutorial.
But if it’s paid for content, I’d want the full thing.
sam August 13th
great one, I am really enjoy plus tutorials
( )Muhammad Adnan August 13th
I’m happy with its PLUS membership. It gives me lots of knowledge.
( )Great Work.
Matthew August 13th
This is a great tutorial, would have loved to see it search via database as well though!
( )Drazen Mokic August 13th
Oh man, i would like to read this tut but unfortunately i cant verify my paypal account because i have no credit card, that sucks -.-
( )Soner Gönül August 13th
İncredible Tutorial!
( )lawrence77 August 13th
Give at least demo for us…
( )Tyler Diaz August 16th
So people go and jack the source? Not a good idea.
( )Moneyxl August 14th
Funny, bet a lot of people have the whole Adobe suite but can’t afford $9 to join this site
( )Juan C Rois August 26th
To the author:Park.
It might be just me that, but I came across something unexpected and I really don’t have much experience with jquery (or javascript for that matter).
I was able to get the “Live Search Box” to work, but I needed to add some extra functionality and I realized that when you use backspace key, let’s say I misspelled something (first letter) and I had to use the backspace key to go all the way to the beginning, doing that should clear the results but in my case they just stay there and actually are added to the results I get when I start typing again.
As we speak I’m trying to fix it but my lack of knowledge is killing me.
Any ideas?
Thanks
( )joel October 5th
I really dont see where the $9 is going to come from.. most of the tutorials arent as good as 5 minutes with Google (no offence). They would be better off doing some screencasts with embedded adverts and monetizing that way, hosting the download links on a sponsor site (and now for a word from our sponsor! – this weeks tut can be downloaded from SloDaddy.com! the web host for you!)
but yeah, $9 a month?? I dont think so.. For MY $9/month I get unlimited movie streaming from NetFlix and 3 dvd’s in the mail/week… some moderately comparable tuts?….out of my student scrimpings?
( )rcard December 23rd
rcard_m (at) hotmail.com
Can anyone send it to me??
Many thanks
( )