jquery autocomplete试用

来源：互联网发布：淘宝c店倒闭编辑：程序博客网时间：2024/05/22 20:23

插件的地方：

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

1.
在页面导入

3.public void getSuggestion() throws IOException
{
   HttpServletResponse response=getResponse();
   HttpServletRequest request=getRequest();
   String str=request.getParameter("q");//得到输入的值
   Map<String, Object> paraMap = new HashMap<String, Object>();
   paraMap.put("proname", "%"+str+"%");//模糊查询包含你输入的字符
   List list=loginService.getsql("getSuggest", paraMap);
   JSONArray jarray=new JSONArray();//下面是组装成json格式
   for(int i=0;i<list.size();i++)
   {
    JSONObject jo=new JSONObject();
    Object[] obj=(Object[])list.get(i);
    jo.put("id", obj[0]);
    jo.put("name", obj[1]);
    jarray.add(jo);

   }
   response.getWriter().print(jarray);//送回客户端
}

----------------------------------------------------------------------------------------------------------------------------

两种方法

        // 方法一（初始化时添加数据）
        /*
        var list = "${serverNmList}".split(',');
        $("#serverNm").autocompleteArray(list);
        */

        // 方法二（实时响应）
        $("#serverNm").autocomplete(
            "serverAuthMng.nhn?m=getServerNmListForAjax",
            {
                delay:0,
                matchContains: true,
                max: 250,
                extraParams: {q:function(){return $('#serverNm').val();}},
                dataType: 'json',
                parse: function(data) {
                   var rows = [];
                   for(var i=0; i<data.length; i++){
                     rows[rows.length] = {
                        data: data[i],
                        value: data[i],
                        result: data[i]
                     };
                    }
                   return rows;
                },
                formatItem: function(row,i,n){
                      return row;
                   },
                formatResult: function(data) {
                       $("#serverNm").innerText = data;
                   }
            }
        );
    });

//-->
</script>