dimanche 29 mars 2015

Autocomplate like facebook - list always appear

I download example of autocomplate search list



The Problem is the list of people always appear even i click outside of list area, i must delete the data from input field to disappear.


What i want when i click any where this list hide or disappear when i click or enter any data appear again inside input field .



About source code



  • index.php

  • js.js (java)

  • db.php (Database)




index code is :



<body bgcolor="#F1f1f1">
<div id='val'>
<div>
<form>
<input type="text" id ="test" name="n" onblur="message()" onclick="showHint(this.value)" onkeyup="showHint(this.value)" placeholder="Search here" autocomplete="off" autocorrect="off" autocapitalize="off" />
<img src="Black_Search.png" class="search" width="20" height="20">
</form>
</div>
</div>
<div id='val2'>
<div id="result"></div>
<div id='more'> <a href='#' class='search_profile'>see more result</a></div>
</div>


java js.js Code is:



function showHint(str)
{
if (str.length==0)
{

document.getElementById("result").innerHTML="";
document.getElementById("val2").style.display = "none";

return;
}



if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
document.getElementById("val2").style.display="block";
}

}
xmlhttp.open("GET","db.php?n="+str,true);
xmlhttp.send();
}


Database db.php code :



if(@mysql_real_escape_string(strip_tags($_GET['n']))){
$_dblocal='localhost';
$_dbrott='root';
$_dbpassword='';
$_dbname='search';
@mysql_connect($_dblocal,$_dbrott,$_dbpassword) or die (mysql_error());
@mysql_select_db($_dbname) or die (mysql_error());
$sele="SELECT * FROM `users` WHERE name LIKE '" .$_GET['n']. "%' ORDER BY id DESC LIMIT 5";

$que=@mysql_query($sele);
while($rows=mysql_fetch_assoc($que)){

$id= $rows['id'];
$name= $rows['name'];
$images = $rows['image'];
$desc= $rows['desc'];

echo "<a href='profile.php?id=$id' class='search_profile' >
<div class='comment'>
<img src='images/$images' width='40' height='40' align='top' class='Square' >
<b>$name</b>
<div class='dec'>$desc</div>


</div> </a>";

}

}else{
echo "Enter Name";
}

Aucun commentaire:

Enregistrer un commentaire