Easily Implement a Live Search Effect: New Premium Tutorial
Download Source Files
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!
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Piao Yishi
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Another great Plus Tutorial which I want to read but I can’t because of credit card…
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.
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 :)
+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
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
Seriously, add your card to paypal, get the content. Not that difficult.
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.
i want to pay with paypal is that possible?
That’s how you would buy the membership. :)
lol
Isn’t it easier to get the values from the server side using AJAX rather than having all the data on the client side?
Yes, you’re definitely right. AJAX is great. But by putting everything on the client side, it’s as fast as a desktop app.
Thanks park!
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?
Great Tutorial, Thanks a lot Park for your contribution. Very useful for many purposes.
Keep up the good work.
Where I can get a coupon code to use when subsribing to the Plus section?
Coupon? Just pay the $9 – it’s not going to bankrupt you, is it? :-)
ha ha ha !
I was thinking in the yearly subscription, not just in one month.
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.
It’s worth it 8)
i love jquery
thank you for this post
How does the search work? Does it search through a SQL database?
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.
:(
Won’t be signing onto PLUS for that then. Unless the values on the client side could be populated via a database.
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.
Okay fair enough if it’s a free tutorial.
But if it’s paid for content, I’d want the full thing.
great one, I am really enjoy plus tutorials
I’m happy with its PLUS membership. It gives me lots of knowledge.
Great Work.
This is a great tutorial, would have loved to see it search via database as well though!
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 -.-
İncredible Tutorial!
Give at least demo for us… :cry:
So people go and jack the source? Not a good idea. ;)
Funny, bet a lot of people have the whole Adobe suite but can’t afford $9 to join this site
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
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_m (at) hotmail.com
Can anyone send it to me??
Many thanks