Rumah > Artikel > pembangunan bahagian belakang > php+ajax实时输入自动搜索匹配的方法

php+ajax实时输入自动搜索匹配的方法

墨辰丷asal: 2018-06-07 09:57:212573semak imbas

本篇文章主要介绍php+ajax实时输入自动搜索匹配的方法，感兴趣的朋友参考下，希望对大家有所帮助。

dropbox_index.php

<!DOCTYPE html>
<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 != &#39;&#39;)
  {
    $con = mysql_connect("localhost","root","lifu");
    if(!$con)
    {  
      die(&#39;Could not connect: &#39; .mysql_error());
    }
    mysql_select_db("my_db",$con);
    
    $sql = "select * from persons";
    //$sql="SELECT FirstName FROM Persons where Firstname like &#39;%$q%&#39;";
  
    $result =mysql_query($sql,$con);
    while($row = mysql_fetch_array($result))
     {
       //匹配判断
       if(stristr(strtolower($row[&#39;FirstName&#39;]),$q))
       {
         //echo "-----------------Persons-----------------";
         echo /* "firstname:" .*/ $row[&#39;FirstName&#39;] . "<br />";
         //echo "lastname:" . $row[&#39;LastName&#39;] . "<br />";
         //echo "age:" . $row[&#39;Age&#39;] . "<br />";
       }
       //echo $row[&#39;FirstName&#39;] . "<br />";
     }
    mysql_close($con);
   }
?>

数据库：

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

php中ZipArchive函数的功能

php 如何进行数据的序列化和反序列化

php如何获取操作系统类型

Atas ialah kandungan terperinci php+ajax实时输入自动搜索匹配的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：php中实现视频拍照Artikel seterusnya：thinkphp自带验证码全面解析

Artikel berkaitan

Lihat lagi