日期:2014-05-16  浏览次数:20413 次

各位大虾你们好,php+ajax搜索文本框下方提示功能!
各位大侠在吗?我想实现这个功能,目前文本框输入字母可以ajax显示对应的值了,但是不是我想要的,我想要的是直接在文本框下方提示,类似于百度搜索提示那种效果!!!能帮忙改下吗,本人菜鸟,想了解这功能流程,忘各位大虾赐教!!!跪拜!!!


目前的效果:



想要的效果:


html代码:

<html>
<head>
<script src="clienthint.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery.suggest.css">
<style type="text/css"> 
div { 
position:absolute; 
top:45%; 
left:50%; 
margin:-100px 0 0 -200px; 
width:400px; 
height:200px; 
line-height:200px; 
font-size:16px; 
z-index:99;


</style> 
</head>

<body>

<div>
<form action="gethint.php" method="get" name="q"> 
<input type="text" id="q" name="q" onkeyup="showHint(this.value)" style="width:300px; height:32px;" />
<input type="submit" style="width:80px; height:34px;" value="Search"/> 
</form>

<p style="margin-top:-160px; width:600px;">Suggestions: <span id="txtHint"></span></p>

</div>

</body>
</html>


php代码:

<?php
// Fill up array with names
$a[]="Anna1";
$a[]="Anna2";
$a[]="Anna3";
$a[]="Anna4";
$a[]="Anna5";
$a[]="Anna6";

$a[]="Brittany1";
$a[]="Brittany2";
$a[]="Brittany3";
$a[]="Brittany4";
$a[]="Brittany5";
$a[]="Brittany6";
$a[]="Brittany7";

$a[]="Cinderella1";
$a[]="Cinderella2";
$a[]="Cinderella3";
$a[]="Cinderella4";
$a[]="Cinderella5";
$a[]="Cinderella6";
$a[]="Cinderella7";

$a[]="Diana1";
$a[]="Diana2";
$a[]="Diana3";
$a[]="Diana4";
$a[]="Diana5";
$a[]="Diana6";
$a[]="Diana7";

$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

//Set output to "no suggestion" if no hint were found
//or to the correct values