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

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

     }

?>

数据库：

aaarticlea/png;base64,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" alt="" />

结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATgAAABRCAIAAADJkS0bAAADkklEQVR4nO3dO5aiQBSAYXZk4naIWI0BeyFhGZMZuRkmkEe9qdICubf/L5qGcuw+p/5TgIrNBODyml//AgD2ESogAKECAhAqIIAb6j/gqtTP1bJQv68fOIGyuUqo0EnZXCVU6KRsrhIqdFI2VwkVOimbq4QKnZTNVUKFTsrmKqFCJ2VzlVCh05Fzdeyae/869eGECp0K56oTT7olQgUqIdT1yWbdWPaUwAkqhTp2zb3v58m+jDAGv/p7Y+800rDrMLefFOqrvy9P9ervpIrrqRfqUtvYNWa9y9559hv/3Gx1GMmct6JacVIqrqjmimosld1obLTiNH/wFk+rktNCtdZ2jn5xRQeEutZmhLo9yNzrLZ5u0ueFSpu4tPJQjTm9HaiWr6jBJn+zoloH3NOr7764AgYcovQVCnfpnH8wNm8FWueo28D3XudsNHw2+4urvl9dqQaOUf5S4nYB11knvYmevuprbOs6u3NvY6U/h9dRIVWlufrlS6bVECp0IlRAAEIFBFA2VwkVOimbq4QKnZTN1eJQgWtSP1cLQgVwQYQKCECogACECghAqIAAgVCfj5vzYdTb45n1nz0ft6Zph8q/IoBYqEabQ5vb6tA2hAocICPU/AAJFThGVqjuIe3QbofF82b3eHkbHRi8bm6HeS91AynZK+q6wVo27TXUX1Hjg+dCc09/gT9tP9T3Whku01ls3Z2pwflnvgByrvq6F5a8NXMZ4OxNDuZ8FsiXdei7MU84/TPSUKixwYQK5Psg1PjxaiDU6GBCBfIVhloWX2owoQL5SkN1ri1N09BuP3iPTAwmVCBfcaiTc7XJbm3dZccbfx21yh8BaMeb8gEBCBUQgFABAQgVEIBQAQEIFRCAUAEBCBUQgFABAT4LdffNSwBqSoXqfDDV/QQ4oQJniYT6btROcWjXDYQKnCoYavpTpxOhAicLhLqbafSOot4x8jLO2Bs4gA7vBbDyQ83o1A01eq/B5SzX2rc+Lr0XwMoLNetrKaxQE/cadD84bj8wvRfAaj9U69rvXJFZVOpeg+lbBO/cQBjAIv/Q18zKCzVyr8H0t2N8/t0ZwB/jhxo7/kyFGlsFCRWoIvTyTDiXWKipUgkVqCL8hof5vNT/GplQqIl7DRIqUEXiLYTeyaf/+uhkbcgYR6jAJ/j0DCAAoQICECogAKECAhAqIAChAgIQKiAAoQICECogAKECAhAqIMB/MmJ5+x0RcJ4AAAAASUVORK5CYII=" alt="" />

秒客网

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

相关文章