快捷導(dǎo)航

PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能

更新時(shí)間：2018年03月13日 10:31:08 作者：塵中客

這篇文章主要介紹了PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能,涉及php結(jié)合ajax實(shí)時(shí)傳輸數(shù)據(jù)與字符串的遍歷、匹配相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能。分享給大家供大家參考，具體如下：

效果圖如下：

代碼如下：

HTML代碼：（該代碼用兩種方法實(shí)現(xiàn)，一種Jquery,一種原生JS）

<html>
<head>
  <script src="/DelphiRequest/search/js/jquery.js"></script>
  <script>
/*用原生js實(shí)現(xiàn)
//    function showResult(str)
//    {
//      if (str.length==0)
//      {
//        document.getElementById("livesearch").innerHTML="";
//        document.getElementById("livesearch").style.border="0px";
//        return;
//      }
//      if (window.XMLHttpRequest)
//      {// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行
//        xmlhttp=new XMLHttpRequest();
//      }
//      else
//      {// IE6, IE5 瀏覽器執(zhí)行
//        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//      }
//      xmlhttp.onreadystatechange=function()
//      {
//        if (xmlhttp.readyState==4 && xmlhttp.status==200)
//        {
//          document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
//          document.getElementById("livesearch").style.border="1px solid #A5ACB2";
//        }
//      }
//      xmlhttp.open("GET","livesearch.php?q="+str,true);
//      xmlhttp.send();
//    }
*/
//用jquery實(shí)現(xiàn)
     function showResult(str){
       $.ajax({
         type: "GET",
         url : "livesearch.php",
         datatype : 'json',
         data: {'q':str} ,
         success :function (data) {
           document.getElementById("livesearch").innerHTML=data;
           document.getElementById("livesearch").style.border="1px solid #A5ACB2";
         }
       })
     }
  </script>
</head>
<body>
<form>
  <input type="text" size="30" onkeyup="showResult(this.value)">
  <div id="livesearch"></div>
</form>
</body>
</html>

PHP代碼如下：（PHP不僅可以考慮直接使用數(shù)組，也可以考慮直接查詢(xún)數(shù)據(jù)庫(kù)，獲取數(shù)據(jù)庫(kù)內(nèi)容，本代碼使用的是數(shù)組。）

<?php
$provinces=array("beijing","tianjin","shanghai","chongqing","hebei","henan","heilongjiang","jilin","changchun",
  "shandong","anhui","shanxi","guangzhou","yunnan","hainan","xizang","qinghai","fujian","guizhou","jiangsu",
  "zhejiang","guangzhou","yunan","hainan","xizang","neimenggu","sichuan","gansu","ningxia","xianggang","aomen");
$tmp=$_GET['q'];
$val=array();
$k=0;
if (strlen($tmp)>0)
{
  for($i=0;$i<31;$i++){
    if(strpos($provinces[$i],$tmp)!==false){
       //傳遞值給val
       $val[$k]=$provinces[$i];
       //下標(biāo)增加
       $k=$k+1;
    }
  }
  //遍歷val數(shù)組
  for($j=0;$j<count($val);$j++)
  {
    echo $val[$j];
    echo "<br>";
  }
}
?>

更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》、《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《php字符串(string)用法總結(jié)》、《PHP數(shù)組(Array)操作技巧大全》及《PHP常用遍歷算法與技巧總結(jié)》

希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: