dropbox_index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/><title>主搜索引擎下拉框自动显示数据</title></head><scriptsrc="js/dropbox.js"type="text/javascript"></script><linkhref="CSS/dropbox.css"type="text/css"rel="stylesheet"/><body><formaction=""method="post"enctype="multipart/form-data"><inputname="txt"id="txt"class="txt"type="text"onkeyup="showHint(this.value)"/><inputtype="submit"class="btn"name="submit"value="Upload"/><
br/><spanid="txtHint"class="file-box"></span></form></body></html>
dropbox.js Ajax
varxmlhttpfunctionshowHint(str)
{if(str.length==0)
{
document.getElementById("txtHint").innerHTML=""return}
xmlHttp=GetXmlHttpObject()if(xmlHttp==null)
{
alert ("Browser does not support HTTP Request")return}varurl="responsepage.php"url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}//设置回调函数functionstateChanged()
{if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}functionGetXmlHttpObject()
{varxmlHttp=null;try{//Firefox,Opera8.0+, SafarixmlHttp=newXMLHttPRequest();
}catch(e)
{//Internet Explorertry{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e)
{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
}returnxmlHttp;
}
dropbox.css
.txt{height:22px;border:1px solid #cdcdcd;width:220px;border-right:none;}.btn{background-color:#FFF;border:1px solid #CDCDCD;height:26px;width:70px;}
responsepage.php
<?php//get the q parameter from URL$q=$_GET["q"];//全部小写化$q=strtolower($q);//非空验证if(isset($q) &&$q!= '')
{$con=MySQL_connect("localhost","root","lifu");if(!$con)
{die('Could not connect: ' .mysql_error());
}mysql_select_db("my_db",$con);$sql= "select * from persons";//$sql="SELECT FirstName FROM Persons where Firstname like '%$q%'";$result=mysql_query($sql,$con);while($row=mysql_fetch_array($result))
{//匹配判断if(stristr(strtolower($row['FirstName']),$q))
{//echo "-----------------Persons-----------------";echo/*"firstname:" .*/$row['FirstName'] . "<br />";//echo "lastname:" . $row['LastName'] . "<br />";
//echo "age:" . $row['Age'] . "<br />";}//echo $row['FirstName'] . "<br />";}mysql_close($con);
}?>
数据库：
结果：