Hi, today i am going to show you about facebook like autosuggestion with jquery ajax and php, i have developed the same thing and it is very easy to implement just we need a database with users table and few lines of jquery script. let's see how we do this.

HTML
in html take the input box and give it id name #search and take one div to display the searched results into response div give it id name #response and put it in hidden mode and we will display the response div while we got the response from ajax
<div id="lessoncup"> <h1 style="margin:5px;">Available Keywords : A, S, k, l, J</h1> <div id="inputbar"> <input name="" type="text" id="search" class="search"><div id="loader"></div> <div id="response"></div> </div></div>
CSS
<style> #inputbar{ width:100%; height:33px; padding:5px; background-color:#039;} .search{ padding:5px; border:solid #333 1px;outline:none; color:#333; font-size:12px; width:200px; float:left;} #response{width:200px; height:auto; border:solid #999 1px; background-color:#FFF; padding:5px; display:none; margin-top:30px;} .loading{ margin-top:7px; margin-left:5px; color:#FFF; float:left;} .list{ margin:0; padding:0; list-style:none;} .list li{ padding:5px; padding-left:0;text-transform:capitalize;} .list img{border:solid #999 1px; width:40px; margin:2px;} </style>
JAVASCRIPT
include the jquery library inside the head, here we need to get the result while key up from input box, write the keyup function to #search input box, write the condition to search box if the length equal to zero it will show the suggestion message, and inside the else write the ajax request and request searchstring.php file and send the stored variable. and display the response message in response div inside the success function
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $('#search').keyup(function(){ var name = $('#search').val(); if(name.length==0){ $('#response').html("Please enter to search records"); }else{ $("#loader").fadeIn(400).html('<div class="loading"><img src="loader.gif" align="absmiddle"> Searching...</div>'); var datasend = 'string='+name; $.ajax({ type: "POST", url: "searchstring.php", data: datasend, success: function(msg){ $("#loader").fadeOut(200); $('#response').fadeIn(200).html(msg); } }); } }); $(document).click(function(){ $("#response").fadeOut('slow'); }); }); </script>
stringsearch.php
connect this file to database and write the query to get the matched results from users table and match the username column to string variable which is coming from ajax request, and write the condition to if the rows is not found put the message to user and if the results are found loop the matched records inside the LI tag. you able to see the result in response div.
<?php extract($_REQUEST); include('db.php'); $getnames=mysql_query("select DISTINCT * from users where username like '".$string."%' limit 0,10"); if(mysql_num_rows($getnames)==0){ echo "No results found"; }else{ echo '<ul class="list">'; while($row = mysql_fetch_array($getnames)){ echo '<li><img src=userimage/'.$row['image'].' align=middle>'.$row['username'].'</li>'; } echo '</ul>'; } ?>
Database
Create the database-- -- Table structure for table `users` -- CREATE TABLE IF NOT EXISTS `users` ( `uid` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `image` varchar(255) NOT NULL, PRIMARY KEY (`uid`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; --
Live Demo Download Script
Hi brother this Tutorial was awesome. I am getting Ajax response but image is not displaying along with the text, only text is displaying. How to link text with the image plz display Database structure. Please suggest me how to solve this error brother.Thank you.
ReplyDeleteNavneeth(UI/Web Developer)
i will update this post along with database structure
Deletegood script !!!!
ReplyDeleteNice post... :)
ReplyDeletereally good bro
ReplyDeleteawesome script thanks but ...image problem only please upload full very soon..... thanks
ReplyDeleteHi brother this Tutorial was excellent. I am getting Ajax response but image is not displaying along with the text, only text is displaying. How to link text with the image please display Database structure. Please suggest me how to solve this error brother.Thank you.
ReplyDeletehey how can we link(to redirect user after clicking the search result) to suggested search result ?
ReplyDelete