pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

php+mysql+jquery實現簡易的檢索自動補全提示功能

這篇文章主要介紹了php+mysql+jquery實現簡易的檢索自動補全提示功能,涉及基于jQuery的ajax數據庫查詢與事件動態響應相關操作技巧,需要的朋友可以參考下

本文實例講述了php+mysql+jquery實現簡易的檢索自動補全提示功能。分享給大家供大家參考,具體如下:

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

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+mysql+jquery實現簡易的檢索自動補全提示功能

點擊某一項后:

php+mysql+jquery實現簡易的檢索自動補全提示功能

更多關于PHP相關內容感興趣的讀者可查看本站專題:《PHP+ajax技巧與應用小結》、《PHP網絡編程技巧總結》、《PHP基本語法入門教程》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》

希望本文所述對大家PHP程序設計有所幫助。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了PHP定義字符串的四種方式,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
下面小編就為大家分享一篇php 替換文章中的圖片路徑,下載圖片到本地服務器的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
下面小編就為大家分享一篇PHP給源代碼加密的幾種方法匯總(推薦),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
下面小編就為大家分享一篇php打開本地exe程序,js打開本地exe應用程序,并傳遞相關參數方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
這篇文章主要介紹了PHP類的反射來實現依賴注入過程以及相關知識點分享,對此有興趣的朋友跟著小編學習下吧。
php遍歷一個文件夾內的所有文件和文件夾,并刪除所有文件夾和子文件夾下的所有文件的代碼,通過遞歸方式實現達到清空一個目錄的效果。本文給大家分享實例代碼,需要的朋友參考
主站蜘蛛池模板: NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | POM塑料_PBT材料「进口」聚甲醛POM杜邦原料、加纤PBT塑料报价格找利隆塑料 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 | 诺冠气动元件,诺冠电磁阀,海隆防爆阀,norgren气缸-山东锦隆自动化科技有限公司 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 | 数控走心机-双主轴走心机厂家-南京建克 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 罗茨真空机组,立式无油往复真空泵,2BV水环真空泵-力侨真空科技 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 中国在职研究生招生信息网| 生态板-实木生态板-生态板厂家-源木原作生态板品牌-深圳市方舟木业有限公司 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | LINK FASHION 童装·青少年装展 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 炒货机-炒菜机-炒酱机-炒米机@霍氏机械| PCB设计,PCB抄板,电路板打样,PCBA加工-深圳市宏力捷电子有限公司 | 今日扫码_溯源二维码_产品防伪一物一码_红包墙营销方案 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 冷热冲击试验箱_温度冲击试验箱价格_冷热冲击箱排名_林频厂家 | 预制直埋蒸汽保温管-直埋管道-聚氨酯发泡保温管厂家 - 唐山市吉祥保温工贸有限公司 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 不锈钢搅拌罐_高速搅拌罐厂家-无锡市凡格德化工装备科技有限公司 | DWS物流设备_扫码称重量方一体机_快递包裹分拣机_广东高臻智能装备有限公司 | 无机纤维喷涂棉-喷涂棉施工工程-山东华泉建筑工程有限公司▲ | 期货软件-专业期货分析软件下载-云智赢 | 同步带轮_同步带_同步轮_iHF合发齿轮厂家-深圳市合发齿轮机械有限公司 | 连栋温室大棚建造厂家-智能玻璃温室-薄膜温室_青州市亿诚农业科技 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | UV固化机_UVLED光固化机_UV干燥机生产厂家-上海冠顶公司专业生产UV固化机设备 | 粉末冶金注射成型厂家|MIM厂家|粉末冶金齿轮|MIM零件-深圳市新泰兴精密科技 | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 超声波乳化机-超声波分散机|仪-超声波萃取仪-超声波均质机-精浩机械|首页 | 都江堰招聘网-都江堰人才网 都江堰人事人才网 都江堰人才招聘网 邢台人才网_邢台招聘网_邢台123招聘【智达人才网】 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 南京办公用品网-办公文具用品批发-打印机耗材采购 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 |