各位你们好，php+ajax搜索文本框下方提示功能-PHP教程-爱易网页

各位你们好，php+ajax搜索文本框下方提示功能

日期：2014-05-16　浏览次数：20495 次

各位大虾你们好，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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

各位你们好，php+ajax搜索文本框下方提示功能

相关资料更多>

推荐阅读更多>