首頁 > 後端開發 > php教程 > PHP和JS實作搜尋提示功能代碼分享

PHP和JS實作搜尋提示功能代碼分享

小云云
發布: 2023-03-21 10:46:02
原創
1636 人瀏覽過

本文主要和大家介紹了PHP+JS實現的即時搜尋提示功能,涉及php結合ajax即時傳輸資料與字串的遍歷、匹配相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。

效果圖如下:

程式碼如下:

HTML程式碼:(程式碼用兩種方法實現,一種Jquery,一個原生JS)


<html>
<head>
  <script src="/DelphiRequest/search/js/jquery.js"></script>
  <script>
/*用原生js实现
//    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 浏览器执行
//        xmlhttp=new XMLHttpRequest();
//      }
//      else
//      {// IE6, IE5 浏览器执行
//        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实现
     function showResult(str){
       $.ajax({
         type: "GET",
         url : "livesearch.php",
         datatype : &#39;json&#39;,
         data: {&#39;q&#39;: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)">
  <p id="livesearch"></p>
</form>
</body>
</html>
登入後複製

PHP程式碼如下:(PHP不僅可以考慮直接使用數組,也可以考慮直接查詢資料庫,取得資料庫內容,本程式碼使用的是陣列。 PHP 搜尋提示:search-suggest


php+jquery 實作搜尋提示功能實例

#

以上是PHP和JS實作搜尋提示功能代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板