jquery autocomplete 自动提示实例

<script type="text/javascript" src=" /ymbug/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src=" /ymbug/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href=" /ymbug/css/themes/base/jquery.ui.all.css" />

<link rel="stylesheet" href="/ymbug/kindeditor/themes/default/default.css" />

<script type="text/javascript">
$(function(){
  $("#type").autocomplete({
    source : function( request, response ) {
    var url = "/ymbug/listProduct?keyword=" + $('#type').val();
    $.ajax({
      url: url,
      dataType: "json",
      success: function( data ) {
      response( $.map( data, function( item ) {
      return {
        code:item.moduleCode,
        value: item.moduleName
      }
    }));
  }
});
},
select: function( event, ui) {
$("#moduleCode").val(ui.item.code);
},
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
scroll:true,
formatItem: function(row, i, max) {
return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
},
formatMatch: function(row, i, max) {
return row.name + row.to;
},
formatResult: function(row) {
return row.to;
}

});
});
</script>

// 后台

ListProductServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{
  PrintWriter out = response.getWriter();
  String keyword = request.getParameter("keyword");
  System.out.println(keyword+"..");
  List products = new BugInfoService().findProduct(keyword);
  JSONArray jsonArray = JSONArray.fromObject(products);
  out.println(jsonArray);
  out.flush();

}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}

}