php+ajax 实现输入读取数据库显示匹配信息

2019-11-21 22:43:49

字体：大中小

来源：转载

供稿：网友

废话不多说了，直接跟大家贴代码了

dropbox_index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>主搜索引擎下拉框自动显示数据</title></head><script src="js/dropbox.js" type="text/javascript"></script><link href="css/dropbox.css" type="text/css" rel="stylesheet"/><body><form action="" method="post" enctype="multipart/form-data">        <input name="txt" id="txt" class="txt" type="text" onkeyup ="showHint(this.value)" />            <input type="submit" class="btn" name="submit" value="Upload" /><br />        <span id="txtHint" class="file-box"></span></form></body></html>

dropbox.js ajax

var xmlHttp    function showHint(str)    {      if (str.length==0)      {        document.getElementById("txtHint").innerHTML=""       return      }      xmlHttp=GetXmlHttpObject()      if (xmlHttp==null)       {         alert ("Browser does not support HTTP Request")         return       }       var url="responsepage.php"      url=url+"?q="+str      url=url+"&sid="+Math.random()      xmlHttp.onreadystatechange=stateChanged       xmlHttp.open("GET",url,true)      xmlHttp.send(null)    }          //设置回调函数    function stateChanged()     {       if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")       {         document.getElementById("txtHint").innerHTML=xmlHttp.responseText        }     }    function GetXmlHttpObject()    {      var xmlHttp=null;      try       {         // Firefox, Opera 8.0+, Safari         xmlHttp=new XMLHttpRequest();      }      catch (e)      {         // Internet Explorer         try         {          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");         }         catch (e)         {          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");         }       }      return xmlHttp;    }

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

数据库：