当前位置： 维易PHP培训学院 > PHP学习 > 内容正文

PHP实战：php+mysql+jquery实现简易的检索自动补全提示功能

作者：VEPHP   时间 2017-09-14

《PHP实战：php+mysql+jquery实现简易的检索自动补全提示功能》要点：
本文介绍了PHP实战：php+mysql+jquery实现简易的检索自动补全提示功能，希望对您有用。如果有疑问，可以联系我们。

本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下：PHP应用

这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作.PHP应用

html+jQuery内容：PHP应用

  1. <html>
  2. <head>
  3.   <style type="text/css">
  4.     #autoBox
  5.     {
  6.       margin: 0px;
  7.       padding: 0px;
  8.       border: 1px solid #CCCCCC;
  9.       width: 200px;
  10.     }
  11.     #autoBox li
  12.     {
  13.       clear: both;
  14.       background-color: white;
  15.       color: black;
  16.       position: relative;
  17.       top: 0px;
  18.       left: 0px;
  19.       line-height: 25px;
  20.       width:200px;
  21.       text-align: left;
  22.       overflow: hidden;
  23.     }
  24.     #autoBox li:hover
  25.     {
  26.       background-color: gray;
  27.       color: yellow;
  28.       cursor: pointer;
  29.     }
  30.   </style>
  31. <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  32. <script type="text/javascript">
  33.   $(function(){
  34.     $.ajaxSetup({cache:false}) ; //不缓存
  35.     //以下代码用于显示检索提示框
  36.     $("#autoBox").hide(); //初始化时隐藏补全提示框
  37.     $("#stuSearch").keyup(function(){ //输入框中的keyup事件激活以下查询行为
  38.       $("#autoBox").html(""); //先清空补全提示框原有内容
  39.       if($("#stuSearch").val().length>0) // 如果输入框不为空
  40.       {
  41.         $.ajax({ //后台调用php文件进行查询
  42.           type:"post",
  43.           url:"phpFiles/stuSearch.php",
  44.           dataType:"json",
  45.           data:{keywords:$("#stuSearch").val()},
  46.           success:function(feedbackdata)
  47.             {
  48.               $("#autoBox").show();// 显示补全提示框
  49.               for(i=0;i<feedbackdata.length;i++) //将结果添加到提示框中
  50.               {
  51.                 $("#autoBox").append("<li>"+feedbackdata[i]['truename']+"</li>");
  52.               }
  53.               $("#autoBox li").on("click",function(){ //为这些新增的li绑定单击事件,单击后将其值赋到输入框中
  54.                 $("#stuSearch").val($(this).text());
  55.               })
  56.               $("#autoBox").append("<li style='text-align:right'>关闭</li>");//在提示框的最后添加一个li用来关闭
  57.               $("#autoBox li:last").on("click",function(){ // 添加单击事件,单击后隐藏提示框
  58.                 $("#autoBox").hide();
  59.               })
  60.             }
  61.         });
  62.       }
  63.     })
  64.   })
  65. </script>
  66. </head>
  67. <body>
  68. <input type="text" placeholder="输入您想检索的关键词后回车." id="stuSearch" name="stuSearch"/>
  69. <ul id="autoBox">
  70. </ul>
  71. </body>
  72. </html>

stuSearch.php代码PHP应用

  1. <?php
  2.   include '../phpFiles/connMysql.php';
  3.   $keywords=$_POST['keywords'];
  4.   $myrs=mysql_query("select * from users where truename like '".$keywords."%'");
  5.   if($myrs)
  6.   {
  7.     while($row=mysql_fetch_array($myrs))
  8.     {
  9.       $temp[]=$row;
  10.     }
  11.     echo(json_encode($temp));
  12.   }
  13. ?>

效果图PHP应用

输入时：PHP应用

PHP实战：php+mysql+jquery实现简易的检索自动补全提示功能PHP应用

点击某一项后：PHP应用

PHP实战：php+mysql+jquery实现简易的检索自动补全提示功能PHP应用

更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》PHP应用

希望本文所述对大家PHP程序设计有所帮助.PHP应用

转载请注明本页网址：
http://www.vephp.com/jiaocheng/965.html


    标签：  




同类教程排行


特辑教程