实现autocomplete技术

1.引入js

<script src="../JS/jquery-1.9.0.js"></script>

<script src="../JS/ui/core.js"></script>
<script src="../JS/ui/widget.js"></script>
<script src="../JS/ui/position.js"></script>
<script src="../JS/ui/menu.js"></script>
<script src="../JS/ui/autocomplete.js"></script>

2.引入css

<link href="../CSS/input.css" rel="stylesheet" media="all" type="text/css" />
<link href="../CSS/jqueryall.css" rel="stylesheet" media="all" type="text/css" />

3.在html代码中编辑一个input标签和相应的css样式

<style type="text/css">
.ui-autocomplete-loading {
  background: white url("../Images/images/ui-anim_basic_16x16.gif") right center no-repeat;
 }
.key{
  width: 15em;
  height:1.25em;
}
</style>

<input  class = "key"  id = "key1" type = "text" name="key1" value="${key1}" />

4.js代码

$(function() {
  //缓存
  var cache = {};
  $("#key1").autocomplete({
   source: function( request, response ) {
    var term = request.term;
                if ( term in cache ) {
     response( cache[ term ] );
     return;
    }
    $.ajax({
     type: "POST",
     url: "testPager.do?action=key1fQueryf",
     dataType: "json",
     data:{key1ftest:  encodeURIComponent(request.term)},
     success: function( data ) {
      cache[ term ] = data.valueField;
      response( data.valueField );
     }
    });
   },
   minLength: 2,
   select: function( event, ui ) {
   //设置已选的选项
   $("#key1").val(ui.item?ui.item.value :this.value);
   },
   open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
   },
   close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
   }
  });
 });
</script>

服务端实现：

// key1值赛选
 private ActionForward key1fQueryf(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  HttpSession session = request.getSession();
  if (null == session.getAttribute(Constant.MANAGER)
    || "".equals(session.getAttribute(Constant.MANAGER))) {
   return mapping.findForward("dealNull");
  } else {
   // key1值前编辑内容值
   String key1f = "";
   try {
    key1f = java.net.URLDecoder.decode(
      request.getParameter("key1ftest"), "UTF-8");
   } catch (UnsupportedEncodingException e) {
    e.printStackTrace();
   }
   List<Manager> lists = mdao.getManagersBylName(key1f);
   JSONArray ja = new JSONArray();
   JSONObject jo = null;
   for (Manager m : lists) {
    jo = new JSONObject();
    jo.put("label", m.getName());
    jo.put("value", m.getName());
    if (ja.contains(jo)) {
     continue;
    }
    ja.add(jo);
   }
   JSONObject o = new JSONObject();
   o.put("valueField", ja);
   try {
    PrintWriter print = response.getWriter();// 取得输出流
    print.write(o.toString());
   } catch (IOException e) {
    e.printStackTrace();
   }
   return null;

  }
 }

 

实现案例

链接http://download.csdn.net/detail/xiaozukun/8379511