Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 112533
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
jquery实现搜索框提示下拉功能

分类： jQuery

2016-03-16 14:42:03

html5中autocomplete 属性规定表单是否应该启用自动完成功能，但是现实中我们还需要精确定位用户到底输入了哪些关键字，从而把他存到数据库中，然后从数据库中读取，本例就是用jquery实现的下拉提示功能

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src=""></script>
  6. <style>
  7. #hintbox{
  8.    display:none;
  9.    width:170px;
  10.    border:1px solid;
  11.    margin-left:136px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16.  <label>请输入手机号码：</label>
  17.  <input type="text" name="phone" id="phone" class="input"/>
  18.  <div id="hintbox" style="display:none"></div>
  19. </body>
  20. <script>

  22. $(document).ready(function(){
  23.    $("#phone").keyup(function(){
  24.       $.ajax({
  25.      type:"GET",
  26.         url:"search.php?q="+$("#phone").val()+"&timeStamp="+new Date().getTime(),
  27.         data:{
  28.          phone:$("#phone").val()
  29.         },
  30.          success:function(data){
  31.          $("#hintbox").html();
  32.          var arr = JSON.parse(data);
  33.          var html ="
      ";
    •          for(var i=0;i<arr.length;i++){
    •              html+="
    • " + arr[i] +"
      • ";
    •          }
    •          html += "
    "    ;
  34.          console.log(html);
  35.          console.log($("#hintbox"));
  36.          $("#hintbox").html(html);
  37.          $("#hintbox").show();
  38.          $("#hintbox ul li").click(function(){
  39.          console.log($(this).text());
  40.          $("#phone").val($(this).text());
  41.          $("#hintbox").hide();
  42.      });
  43.      if($("#phone").val()===""){
  44.      $("#hintbox").hide();
  45.      }
  46.          }
  47.      });
  48.   });
  49. })
  50.   
  51. </script>
  52. </html>

  1. 后台代码是用php实现的search.php

点击(此处)折叠或打开

  1. <?php

  3. //获取到客户端请求参数：查询的关键字
  4. $keyword = $_GET['q'];

  6. //从数据库或缓存中模糊匹配，返回结果
  7. $a = $keyword."aaaa";
  8. $b = $keyword."bbbb";
  9. $c = $keyword."cccc";

  11. $result = array($a,$b,$c);

  13. echo json_encode($result);

  15. ?>
效果如下
阅读(873) | 评论(0) | 转发(0) |
0

上一篇：angular js 备忘录

下一篇：angularjs实现页面加载到最底部自动换页功能

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6