This is simple and most useful script inspired by facebook friends live search script. Live search script can definitely help you create a interactive user experience. I have already posted few tutorials about creating better UI experience. Live search using jquery script can be integrated easily on any page where you are listing products, user profiles, news, blog posts etc.
Simple html layout.
This could be made simple using tables but by using tables you couldnt achieve smooth animation effect so here we will be using div (Actually, I prefer designing using divs only, that makes me perfect every-time i design new script as well as users get the best).
There is nothing rocket science like in jquery part, The most important part of the script is in just one line which is
The “i” in the RegExp performs case insensitive search. Remaining part is common to other jquery codes. have a look.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
*{ font-family : 'lucida grande',tahoma,verdana,arial,sans-serif; } .holder{ width: 850px; border: 1px solid #C4CDE0; border-radius: 2px; margin: 0% 18%; height: auto; overflow: hidden; } .search-holder{ margin: 3px; background: #ECEFF5; border-bottom: 1px solid #C4CDE0; height: 50px; } .title{ font-size: 16px; font-weight: bold; width: 70%; color: #333333; margin-left: 20px; } .fl{ float: left; line-height: 50px; } .textbox{ margin-top: 15px; } .textbox input{ border: 1px solid #C4CDE0; outline: medium none; padding: 2px; width: 190px; font-size: 11px; height: 22px; } .friends{ margin: 20px 25px; } .friend_holder{ border-bottom: 1px solid #B2B2B2; width: 46%; height: 100px; margin-bottom: 5px; margin-top: 10px; margin-right: 10px; } .name{ margin-left: 10px; } .name a{ font-size: 12px; font-weight: bold; color: #3B5998; cursor: pointer; text-decoration: none; } .name a:hover{ text-decoration: underline; } |
This could be made simple using tables but by using tables you couldnt achieve smooth animation effect so here we will be using div (Actually, I prefer designing using divs only, that makes me perfect every-time i design new script as well as users get the best).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<body> <div class="holder"> <div class="search-holder"> <div class="title fl">Friends</div> <div class="textbox fl"> <input type="text" name="search" class="search" value="" placeholder="Search Your Friends" autocomplete="off"> </div> </div> <div class="friends"> <? $friends = array( 'sample name 1'=>'photos/1.jpg', 'sample name 2'=>'photos/2.jpg', ); foreach($friends as $name=>$photo){ echo '<div class="friend_holder fl" id="'.$name.'">'; echo '<div class="photo fl"><img src="'.$photo.'"></div>'; echo '<div class="name fl"><a href="#">'.$name.'</a></div>'; echo '</div>'; } ?> </div> </div> </body> |
|
1 |
$(this).attr("id").match(new RegExp(str, "i") |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ $(".search").keyup(function(){ var str = $(".search").val(); $(".friends .friend_holder").each(function(index){ if($(this).attr("id")){ if(!$(this).attr("id").match(new RegExp(str, "i"))){ $(this).fadeOut("fast"); }else{ $(this).fadeIn("slow"); } } }); }); }); |
Can this be used to search an entire database or does it just text on that specific page? Great tutorial and thanks for sharing.
Actually its a javascript based search so it will work only on local machines, witch means you cant use it to search the data in database.
Hey Amit,
I’m new to programming, pardon me if this sounds trivial but could sometimes its a bit difficult to follow along with your tutorials. Don’t get me wrong, your explanations are clear and concise.
The problem is, some of us can’t figure out how exactly the lines of codes piece together in (their respective files), and thus we can’t come up with fully functional implementations of this tutorial.
I would like to experience the joy of actually hacking it & seeing it work on my localhost. That being said, it would mean a lot if you could provide the files for download.
Regards.
just open demo and copy the source code and save it with some name, thats all.
Thank you Sir. I am indebted to you! 🙂
Hey Amit
I was watching your work and is pretty good, I like it a lot.
I would like to ask you with this live search, can we do it for our database?
I know your code is on java and only for the localhost, but I would like to ask if we can do it for the database
Kind regards
There are 2 ways if you have less records you can fetch all of them and then use same script and second is, if you have large number of records then you can use ajax search which will little slower compared to this script.
I want like dropdown search while searching it. how to implement that one ?
You need to use autosuggest script