首頁 > 教學 > PHP 教學

詳解PHP如何?簡易的搜尋方塊自動提示功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
如何?簡易的搜尋方塊自動提示功能？本文主要介紹了php+mysql+jquery實現簡易的檢索自動補全提示功能，涉及基於jQuery的ajax資料庫查詢與事件動態響應相關操作技巧，需要的朋友可以參考下。希望對大家有所協助。

具體如下：

這段時間看了一些關於自動補全提示方面的內容，發現大部分實現過程都十分複雜。心想這應該是一個比較簡單的功能啊，於是自己親自動手來小試一下。思路很常規，需要說明的是沒有為提示內容綁定鍵盤事件，僅可用滑鼠操作。

html+jQuery內容：

<html><head>  <style type="text/css">    #autoBox    {      margin: 0px;      padding: 0px;      border: 1px solid #CCCCCC;      width: 200px;    }    #autoBox li    {      clear: both;      background-color: white;      color: black;      position: relative;      top: 0px;      left: 0px;      line-height: 25px;      width:200px;      text-align: left;      overflow: hidden;    }    #autoBox li:hover    {      background-color: gray;      color: yellow;      cursor: pointer;    }  </style><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript">  $(function(){    $.ajaxSetup({cache:false}) ; //不緩衝    //以下代碼用於顯示檢索提示框    $("#autoBox").hide(); //初始化時隱藏補全提示框    $("#stuSearch").keyup(function(){ //輸入框中的keyup事件啟用以下查詢行為      $("#autoBox").html(""); //先清空補全提示框原有內容      if($("#stuSearch").val().length>0) // 如果輸入框不為空白      {        $.ajax({ //後台調用php檔案進行查詢          type:"post",          url:"phpFiles/stuSearch.php",          dataType:"json",          data:{keywords:$("#stuSearch").val()},          success:function(feedbackdata)            {              $("#autoBox").show();// 顯示補全提示框              for(i=0;i<feedbackdata.length;i++) //將結果添加到提示框中              {                $("#autoBox").append("<li>"+feedbackdata[i]['truename']+"</li>");              }              $("#autoBox li").on("click",function(){ //為這些新增的li綁定單擊事件，單擊後將其值賦到輸入框中                $("#stuSearch").val($(this).text());              })              $("#autoBox").append("<li style='text-align:right'>關閉</li>");//在提示框的最後添加一個li用來關閉              $("#autoBox li:last").on("click",function(){ // 添加單擊事件，單擊後隱藏提示框                $("#autoBox").hide();              })            }        });      }    })  })</script></head><body><input type="text" placeholder="輸入您想檢索的關鍵詞後斷行符號。" id="stuSearch" name="stuSearch"/><ul id="autoBox"></ul></body></html>

stuSearch.php代碼

<?php  include '../phpFiles/connMysql.php';  $keywords=$_POST['keywords'];  $myrs=mysql_query("select * from users where truename like '".$keywords."%'");  if($myrs)  {    while($row=mysql_fetch_array($myrs))    {      $temp[]=$row;    }    echo(json_encode($temp));  }?>

輸入時：

點擊某一項後：

相關推薦：

詳解PHP如何?數獨求解

詳解如何通過php動態傳資料到highcharts

詳解PHP如何產生有時效性的密文

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More