DEVELOPMENT

We know that there is now almost no scope of any static content on webpages. You must have to include dynamic content which help in increasing the interactivity with your website consequently, saving the user's time and giving him/her a pleasant experience.

Ajax is for this. Today i'll demonstrate one of most coolest application of ajax , a auto-suggestion drop-down menu.

THE SITUATION

auto suggestion drop down menu

You must have all seen auto-suggestion drop-down menu. Before writing the code, let's take it quick scenario.

First of all, we want a textfield which generate the hint on keyup event. This thing is possible by sending a HTTP GET or POST request to the server using ajax and getting hint as a response.

On hovering or selection of hint by the user, the background color of that particular hint must be changed.

INDEX.PHP
<!DOCTYPE html>
<html> 
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
window.hintno = -1; 
$(document).ready(function(){
$("#src").keydown(function(e)
{ if (e.keyCode == 40) {
            nhint(1); } 
    if(e.keyCode==38) 
    {       nhint(-1); 
    } 
    
    }); 
    
    var nhint = function(val) { 
    
    hintno += val; 
    if (hintno >= $(".hint").length)
    hintno=0; 
    
    if (hintno < 0)
    hintno = $(".hint").length - 1;
    
    $(".hint").removeClass("hint_h").eq(hintno).addClass("hint_h"); 
    }
});

</script> 
<script> 
function showHint(str,event) 
{ var x = event.keyCode;
if (x == 40 || x==38) //40 - downkey , 38 - upkey { return; } 
var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() 
{ if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { document.getElementById("country").innerHTML=xmlhttp.responseText; } 
} xmlhttp.open("GET","hintdrop.php?s="+str,true); xmlhttp.send(); 
} 
function mOver(obj) { 
obj.style.backgroundColor = "#1ec5e5"; 
}
function mDown(obj) { 
obj.style.backgroundColor = "#1ec5e5";
document.getElementById("src").value = obj.id; 
} 
function mUp(obj) { 
obj.style.backgroundColor = "#ffffff"; 
document.getElementById("country").innerHTML=""; 
} 
function mOut(obj) {
obj.style.backgroundColor = "#ffffff";
} 
</script>
</head> 
<body> <form action="" method=""> 
<input type="text" onkeyup="showHint(this.value,event)" id="src">
<div id="country" ></div> 
</form> </body>
</html>


HINTDROP.PHP
   
<?php

 $a[]="India";
 $a[]="Indonesia";
 $a[]="China";
 $a[]="SriLanka";
 $a[]="England";
 $a[]="Australia";


$onmo="mOver(this)";
$onmd="mDown(this)";
$onmu="mUp(this)";
$onmou="mOut(this)";

$s=$_REQUEST["s"]; $hint="";

if ($s !== "") {
  
    $len=strlen($s);

  foreach($a as $name) {
    if (stristr($s, substr($name,0,$len))) {
      if ($hint==="") {
         
          $hint="
$name
"; } else { $hint .= "
$name
"; } } } } echo $hint; ?>
I've written separate javascript function for each. All the four function i've include in the index.php.
GETTING BACK TO INDEX.PHP

STYLE.CSS
    
body
{
    background: #c77;
}
div#country{
        width:150px;			
		-webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
		box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);	
		overflow: hidden;
        cursor:pointer;
        background: #fff;
	}
.hint_h
{
  background:#1ec5e5;
}








All rights reserved, the content is copyrighted to the author.

RELATED POST