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

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

list

List 像facebook一样的自动完成-列表总是出现,list,hide,blur,onblur,List,Hide,Blur,Onblur,我下载了自动完成搜索列表的示例 <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

我下载了自动完成搜索列表的示例

<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>

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

<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>

当我单击此列表隐藏或消失的任何位置时，我想要什么单击或输入再次出现在输入字段内的任何数据

<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>

关于源代码

<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>

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>

数据库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>

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

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

if（@mysql\u real\u escape\u字符串（strip\u标记（$\u GET['n']））{
$\u dblocal='localhost'；
$\u dbrott='root'；
$\u dbpassword=''；
$\u dbname='search'；
@mysql\u connect（$\u dblocal，$\u dbrott，$\u dbpassword）或die（mysql\u error（））；
@mysql_选择_db（$_dbname）或die（mysql_error（））；
$sele=“从`users`WHERE name LIKE'”中选择*。$\u获取['n']。“%”按id排序描述限制5”；
$que=@mysql\u查询（$sele）；
while（$rows=mysql\u fetch\u assoc（$que））{
$id=$rows['id']；
$name=$rows['name']；
$images=$rows['image']；
$desc=$rows['desc']；
回声“；
}
}否则{
回显“输入名称”；
}

在询问之前，您应该展示自己在解决此问题方面的努力。你们试过什么？我试过了，我在js.js和index.php中添加了这个函数message（）{document.getElementById（“val2”）.style.display=“none”；}在js.js和index.php中，我用这一行替换输入，它工作正常，但当我单击结果列表中的任何项目时，我面临新的问题没有操作，当我禁用函数messege action work，但列表总是再次出现