本文共 3377 字，大约阅读时间需要 11 分钟。

想要达到效果，当在快递员属性(courierName)文本框（input）中输入字符时，能显示后台的相关数据，并把快递员电话属性(courierId)能回写到文本框（input），如下图：

1.首先引人jquery.autocomplete.css和jquery.autocomplete.js文件

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/ui/jquery.autocomplete.css" />

<script type="text/javascript" src="<%=request.getContextPath()%>/js/ui/jquery.autocomplete.js"></script>

2.写javascript文件

<script type="text/javascript">

         var dataCouriers;          $(function(){              approvalCourier();              $("#courierName").focus(function() {                  autoCompleteInput($("#courierName"), dataCouriers);              });          });                    /**ajax调后台**/          function approvalCourier()          {               var courierName = $("#courierName").val();               $.ajax({                           url:$("#path").val()+"/admin/userOrder/getDetail",                           dataType:"json",                           type:"post",                           data:{courierName:courierName},                           success:function(result){                                var courierList = result.courierList                                dataCouriers = courierList;                           }                       });           }          //在jquery.autocomplete.js文件中          //$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event)          //添加中文绑定输入法              //.bind("input", function() {          // @hack:support for inputing chinese characters in firefox          //绑定中文输入法          //onChange(0, true);          //});                   function autoCompleteInput(obj,data)            {                $(obj).autocomplete(data,              {                    minChars: 1,     //搜索词（从第几个开始）在触发autoComplete前用户至少需要输入的字符数，Default:1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表。                  width: 310,      //下拉框宽度                  matchContains: true,      //决定比较时是否要在字符串内部查看匹配，如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false                  autoFill: false,     //要不要在用户选择时自动将用户当前鼠标所在的值填入到input框，Default: false                  formatItem: function(row, i, max)  //回值将用LI元素包含显示在下拉列表中                  {                        return '<span style="color:gray;padding-right:10px;"> ' + row.courierName + '</span> <span style="color:#005EA7">[' + row.courierId + ']</span>';                    },                    formatMatch: function(row, i, max)   //对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的                  {                        return row.courierName + row.courierId;                    },                    formatResult: function(row)                  {                        return row.courierId;                    },                    parse:function(data)                  {//解释返回的数据，把其存在数组里                        var array=eval(data);                        var parsed = [];                        if(array == null)                        {                            return parsed;                        }                        for (var i = 0; i < array.length; i++)                      {                            parsed[i] =                          {                                data: array[i],                                value: array[i].courierId,                                result: array[i].courierName                            };                        }                      return parsed;                    }                    }).result(function(event, row, formatted) //回调函数，填充对应的属性                          {                               // alert(row.id);                                (obj).val(row.courierName);                              $("#courierId").val(row.courierId);                          });            }        </script>

3.后台方法

 @RequestMapping(value = "/getDetail")

     public ModelAndView getDetail(HttpServletRequest request,HttpServletResponse response)      {        //获取网点登入信息          BranchUser user = getBranchInfo.getBranch(request);          String branchId = user.getBranchId();                    QueryResult result = null;          Map<String,Object> map = new HashMap<String, Object>();          PageObj pageObj = new PageObj();          map.put("branchId", branchId);          result = this.orderManagerService.getDetail(map);          List<UserOrder> orderList = new ArrayList<UserOrder>();          if(null != result)          {              orderList = result.getQueryList();              pageObj.setTotalCount(result.getTotalCount());          }          List<CourierInfo> lst = new ArrayList<CourierInfo>();          for(int i = 0;i<orderList.size();i++){              CourierInfo uo = new CourierInfo();              uo.setCourierName(orderList.get(i).getCourierName());              uo.setCourierId(orderList.get(i).getCourierId());              lst.add(uo);          }          result.setQueryList(lst);          //把查询的数据转换成json，前台获取调用          String jsonList = JsonUtil.listToJson(lst);          try {             writeJson("{\"courierList\":" + jsonList + "}", response);    //组装json中的courierList值，在前台ajax中调用         }catch (IOException e) {             e.printStackTrace();         }          return null;      }