欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-05 10:02:17
废话不多说了,直接跟大家贴代码了 dropbox_index.php

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

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

数据库:

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

以上就是本文给大家介绍的php+ajax 实现输入读取数据库显示匹配信息的全部内容,希望大家喜欢。