像facebook一样的自动完成 - 列表总是出现

时间:2015-03-29 20:05:53

标签: list hide blur onblur

我下载了自动编译搜索列表的示例

  

问题是即使是我总是出现的人员名单   单击列表区域外,我必须从输入字段中删除数据才能消失。

     

当我点击此列表隐藏或消失时,我想要的是什么   点击或输入任何数据再次出现在输入字段内。

关于源代码

  • index.php
  • js.js(java)
  • db.php(数据库)

索引代码是:               

<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代码是:

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();
}

数据库db.php代码:

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";  
}   

0 个答案:

没有答案