Auto suggestion using Ajax, jQuery and PHP

Hi everybody, this is my first blog ever. Today I am talking about auto suggestion using Ajax, jQuery and PHP. Lets start to build auto suggestion application

Step 1: Creating database table for auto suggestion application
CREATE TABLE IF NOT EXISTS autosuggession (
user_id int(11) NOT NULL AUTO_INCREMENT,
username varchar(50) NOT NULL,
PRIMARY KEY (user_id )
);

Now we insert some row in our table
INSERT INTO `autosuggession` (`user_id`, `username`) VALUES (NULL, ‘De Gea’), (NULL, ‘Rafael’), (NULL, ‘Shaw ‘), (NULL, ‘Jones’), (NULL, ‘Rojo’), (NULL, ‘Evans’), (NULL, ‘Di Maria’), (NULL, ‘Mata’), (NULL, ‘Falcao’), (NULL, ‘Rooney’), (NULL, ‘Januzaj’), (NULL, ‘Smalling’), (NULL, ‘Lindegaard’), (NULL, ‘Hernandez’), (NULL, ‘Carrick’), (NULL, ‘Herrera’), (NULL, ‘Henriquez’), (NULL, ‘Valencia’);

Step2: Creating view file index.php for auto suggestion(You can give any name)




	
	AutoSuggestion using  Ajax, Jquery and PHP
	


    Step 3: Create style.css

    *{margin:0;padding:0;}
    body {
    	margin: 0;
    	padding: 0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 12px;
    }
    
    .autodropdown{position:absolute;top:56px;left:15px;}
    .abhijitscript{
    	padding:4px;
    	border:1px solid #333;
    }
    .suggestresult{
    	width:339px;
    	list-style:none;
    }
     
    .suggestresult li{
    	padding:5px;
    	border:1px solid #333;
    	border-top:0;
    	cursor:pointer;
    	background:#333;
    	color:#fff;
    	border-bottom:1px solid #666;
    }
    
    .suggestresult li:hover{
    	background:#666;
    	color:#ffffff;
    	cursor:pointer;
    }
    
    
    .cf:before, .cf:after{
        content:"";
        display:table;
    }
     /*--------*/
    .cf:after{
        clear:both;
    }
     
    .cf{
        zoom:1;
    }    
    
    .form-wrapper {
        width: 450px;
        padding: 15px;
        margin: 50px auto 50px auto;
        background: #444;
        background: rgba(0,0,0,.2);
        border-radius: 10px;
        box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    }
    .serch-wrap{  width: 450px;
        margin: 0 auto;
    	position:relative;
    	
    	}
     
    /* Form text input */
     
    .form-wrapper input[type="text"] {
        width: 330px;
        height: 20px;
        padding: 10px 5px;
        float: left;   
        font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 0;
        background: #eee;
        border-radius: 3px 0 0 3px;     
    }
     
    .form-wrapper input[type="text"]:focus {
        background: #fff;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }
     
    .form-wrapper input[type="text"]::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
     
    .form-wrapper input[type="text"]:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }
     
    .form-wrapper input[type="text"]:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }   
     
    /* Form submit button */
    .form-wrapper input[type="submit"] {
        overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 110px;
        font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #fff;
        text-transform: uppercase;
        background: #d83c3c;
        border-radius: 0 3px 3px 0;     
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    }  
       
    .form-wrapper input[type="submit"]:hover{    
        background: #e54040;
    }  
       
    .form-wrapper input[type="submit"]:active,
    .form-wrapper input[type="submit"]:focus{  
        background: #c42f2f;
    
    }
     
    .form-wrapper input[type="submit"]:before { /* left arrow */
        content: '';
        position: absolute;
        border-width: 8px 8px 8px 0;
        border-style: solid solid solid none;
        border-color: transparent #d83c3c transparent;
        top: 12px;
        left: -6px;
    }
     
    .form-wrapper input[type="submit"]:hover:before{
        border-right-color: #e54040;
    }
     
    .form-wrapper input[type="submit"]:focus:before,
    .form-wrapper input[type="submit"]:active:before{
            border-right-color: #c42f2f;
    }     
     
    .form-wrapper input[type="submit"]::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
        border: 0;
        padding: 0;
    }

    Step 4: Now create autosuggestion.js file

    $(document).ready(function(){
    	$('.abhijitscript').keyup(function(){
    		var query_string = $(this).val();
    		$.ajax({
    			type: "POST",
    			url: "search.php",
    			data: { name:query_string },
    			success: function(data)
    			{
    				$('.suggestresult').html(data);
    				$('.suggestresult li').click(function(){
    					var return_value = $(this).text();
    					$('.abhijitscript').attr('value', return_value); 
    					$('.abhijitscript').val(return_value);
    					$('.suggestresult').html('');
    				});
    			}
    		});
    	});
    });

    Step 5: Create search.php for ajax request

    <?php
    mysql_connect('localhost','root','');
    mysql_select_db('test');
    if(isset($_POST['name']))
    {
    	$username = mysql_real_escape_string(trim($_POST['name']));
    	$sql = "SELECT `username` FROM `autosuggession` WHERE `username` LIKE '$username%'";
    	$myquery = mysql_query($sql) or die(mysql_error());
    	if(mysql_num_rows($myquery) !=0)
    	{
    		while(($row = mysql_fetch_array($myquery )) !== false)
    		{
    			echo '<li>'.$row['username'].'</li>';
    		}
    	}
    	else
    	{
    		echo '<li>Not Found</li>';
    	}
    }
    ?>

    Demo
    Download

    Spread the love
    •  
    •  
    •  
    • 1
    •  
    •  
    •  
    •  
    •  
    •  
      1
      Share