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);

}

}