随笔-12  评论-6  文章-0  trackbacks-0
因为项目需要,需要做输入框自动提示功能,之前我只是使用过这种功能,相信大家也都使用过,百度~现在要让我自己做,好吧,还是百度一下,百度搜索“输入框自动提示”,弹出一对页面,也看了一堆文章,有自己开发的,也有插件的。
最后经过几次试验,我选择了JQuery.Autocomplete这款插件,还行吧用着,支持本地也支持ajax访问服务器,这款插件是基于jquery的,各位若有项目需要使用的,可以尝试一把。

源码下载:JQuery.AutoComplete

本地自动提示的方式我就不说了,各位下载源码之后看一下也就明白了,当然不明白的也可以问我,说一下ajax访问服务器的方式吧,直接上代码最为直接:


$(
function(){
    
    
      var onAutocompleteSelect =function(customer) {  
      $('#customerIdString').val(customer.data);
          }; 
          
var options = {
              serviceUrl: '${pageContext.request.contextPath}
/TCustomer/getAllCustomer.koala',//获取数据的后台页面
              onSelect: onAutocompleteSelect,//选中之后的回调函数
              extraParams: {selectedCustomerName:$.trim($("#selectedCustomerName").val())},//动态参数值
              paramName: "selectedCustomerName",
              noCache: 
false//是否启用缓存 默认是开启缓存的
              max:10,
              autoFill:
false
          };         
          $('#selectedCustomerName').autocomplete(options);
});

这样我们就可以把填入输入框的值作为extraParams动态参数传递到后台去,后台直接request.getParameter("selectedCustomerName");就可以了。

值得注意的是,后台应该返回什么样的数据格式,这个插件需要注意的地方就是这块了,如果不是他要求的格式的话,页面会报js错误的,要求的数据格式必须是这样的json串:

{"query":"A","suggestions":[{"data":"114e69b4-87a9-4c2b-aed4-1727568a92a7","value":"AAA111"},{"data":"531b59ca-8618-48f4-a6e8-963320e10159","value":"小人物_Amor"}]}

query后面的A是我输入框传入的参数,根据A模糊查询出两组数据,并以json的格式放在key为suggestions里。

后台代码:

    
    @ResponseBody
    @RequestMapping(
"/getAllCustomer")
    
public Object getAllCustomer(HttpServletRequest request,HttpServletResponse response)throws IOException{
        List
<Object> queryCustomerList = new ArrayList<Object>();
        List
<TCustomerDTO> allCustomer = new ArrayList<TCustomerDTO>();
        //获取前台带过来的动态参数
        String selectedCustomerName 
= request.getParameter("selectedCustomerName");
       
        //得到包含
selectedCustomerName参数的对象
        allCustomer = tCustomerApplication.findAllTCustomer();
        
for (Iterator iterator = allCustomer.iterator(); iterator.hasNext();) {
            TCustomerDTO tCustomerDTO 
= (TCustomerDTO) iterator.next();
            
if(tCustomerDTO.getName().contains(selectedCustomerName)){
                Map
<String, Object> result = new HashMap<String, Object>();
                result.put(
"value", tCustomerDTO.getName());
                result.put(
"data", tCustomerDTO.getId());
                queryCustomerList.add(result);
            }
        }
       
        //构造规定的json数据格式
        Map
<String, Object> query_result = new HashMap<String, Object>();
        Object json 
= JSONArray.toJSON(queryCustomerList);
        query_result.put(
"query", selectedCustomerName);
        query_result.put(
"suggestions", json);
        Object json_map 
= JSONArray.toJSON(query_result);
        System.out.println(json_map);
        
return json_map;
    }

OK了,其实很简单,当然你需要引入jquery,以及他所要求的其他两个js文件,各位下载源码后看示例就知道啦~
posted on 2014-05-22 18:11 小人物_Amor 阅读(1203) 评论(0)  编辑  收藏 所属分类: web

只有注册用户登录后才能发表评论。


网站导航: