@greenfavo 2015-10-02T17:22:08.000000Z 字数 2344 阅读 816

php学习笔记（三）ajax自动补全输入框

php

一，前言

百度谷歌等搜索引擎都有自动补全的功能，用户只要在搜索框中输入内容的开头的信息，程序就会根据这些输入信息自动在下拉框中显示相关信息，用户可以在下拉框中选择，这样就减少了用户输入的工作量，带来更好的用户体验。这一切的异步查询当然要用到ajax了。下面以一个简单的公交线路查询为例说明实现的方法。

二，思路

实现自动补全功能的具体思路是：文本框没有内容时，下拉边框隐藏。当用户在文本框输入字符后，就调用findroutes()函数，该函数将获取用户输入的内容，然后将其异步提交到后台查询以它开头的内容，再将查询结果以JSON格式返回到，前端页面再将这些JSON数据添加到文本框下面的下拉框里。当用户从下拉框里选中某条信息时，就让文本框的值也等于它，同时下拉框消失。

三，布局

除了html还加了简单的css，主要是给下拉框定位和列表美观。

<style type="text/css">
    input{
        width: 150px;
    }
     #popup{
        width: 150px;
        position: absolute;
        left: 80px;
        top: 28px;
     }
     /*显示提示框边框*/
     #popup.show{
        border: 1px solid #ccc;
     }
     /*清除列表的默认样式*/
     ul{
        list-style: none;
        margin: 0;
        padding: 0;
     }
     li.mouverOver{
        background-color: #25caae;
        color: #fff;
        height: 1em;
     }
    </style>
</head>
<body>
    <form>
        <!-- 松开按键时开始查询 -->
        公交路线:<input type="text" id="routes" onkeyup="findroutes();" />
    </form>
    <div id="popup">
        <!-- 放置提示内容 -->
        <ul id="route_ul"></ul>
    </div>

四，ajax交互

写了几个函数，有点绕，需仔细看看。

<script type="text/javascript">
    function findroutes(){
      if ($("#routes").val().length>0) {
        var route=$("#routes").val();
        $.get("auto-complete.php",{sBus:route},function(data){
            var aResult=new Array();
            if (data.length>0) {//如果查询结果不为空
                aResult=data.split(",");//解析后台传过来的JSON数据
                setroutes(aResult);//调用setroutes函数将每条提示结果放入li标签中
            }else clearroutes();
        })
      }else clearroutes();//无输入时清除提示框
    }
    //显示提示框，传入参数为所有提示结果组成的数组
    function setroutes(aResult){
       clearroutes();//每输入一个字母前先清除原有提示再继续
       $("#popup").addClass('show');
       for(var i=0;i<aResult.length;i++){
          //将匹配的提示逐一显示给用户
          $("#route_ul").append($("<li>"+aResult[i]+"</li>"));
          $("#route_ul").find('li').click(function(){//当选中某条提示结果时
              $("#routes").val($(this).text());//让查询框的值等于提示结果
              clearroutes();
          }).hover(function() {//添加鼠标滑过时的高亮效果
            $(this).addClass('mouverOver');
          }, function() {
            $(this).removeClass('mouverOver');
          });
       }      
    }
    //清除提示框
   function clearroutes(){
      $("#route_ul").empty();
      $("#popup").removeClass('show');
   }
    </script>

五，PHP处理

下面是auto-complete.php文件，比较简单。

<?php
  require 'conn.php';//数据库连接信息
  $sInput=trim($_GET['sBus']);
  $sResult="";//用来保存提示结果
  //查询以sInput开头的信息
  $sql="select routename from route where routename like '$sInput%'  limit 10";
  $result=mysql_query($sql);
  while ($row=mysql_fetch_assoc($result)) {
    $sResult=$sResult.$row['routename'].",";//将每条提示结果用,分开,JSON数据格式
  }
  if (strlen($sResult)>0) {
        $sResult=substr($sResult, 0,-1);//去掉最后的,号
  }
  echo $sResult;//输出所有提示结果
?>

六，后记

功能是可以实现的，美中不足的是每输入一个字符ajax都要去查询一遍，输入英文还好，输入中文在你还没打出一个汉字还在拼写时就把拼音发到后台查询了，我觉得这样频繁地效率有点低。本想用setTimeout延时查询的，但并没有效果，因为函数触发的事件是onkeyup，即每次按键完成就会触发，所以会逐字母查询。尝试了一番没有解决的方法。我看百度搜索框也会逐字母查询，那就暂且放过这个问题吧。