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


Posted in PHP onApril 15, 2017

本文实例讲述了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在joomla中的原生态应用代码
Jul 19 PHP
php中如何使对象可以像数组一样进行foreach循环
Aug 09 PHP
php数组中包含中文的排序方法
Jun 03 PHP
php修改指定文件后缀的方法
Sep 11 PHP
深入探究PHP的多进程编程方法
Aug 18 PHP
php实现简单加入购物车功能
Mar 07 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
Nov 06 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
Feb 11 PHP
PHP实现的函数重载功能示例
Aug 03 PHP
PHP实现八皇后算法
May 06 PHP
浅析PHP7 的垃圾回收机制
Sep 06 PHP
浅谈laravel中的关联查询with的问题
Oct 10 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
Apr 15 #PHP
PHP快速推送微信模板消息
Apr 14 #PHP
PHP 中常量的知识整理
Apr 14 #PHP
php动态读取数据清除最右边距的方法
Apr 12 #PHP
详解使用php调用微信接口上传永久素材
Apr 11 #PHP
php array_reverse 以相反的顺序返回数组实例代码
Apr 11 #PHP
PHP和MYSQL实现分页导航思路详解
Apr 11 #PHP
You might like
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php 中的closure用法详解
2017/06/12 PHP
javascript hashtable实现代码
2009/10/13 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
再谈javascript原型继承
2014/11/10 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python Selenium截图功能实现代码
2020/04/26 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
高中语文教学反思
2014/01/16 职场文书
企业军训感言
2014/02/08 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
欢迎新生标语
2014/10/06 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js