自动补全词条插件jquery.wx.bigautocomplete.js

版权声明:本文为博主原创文章,未经博主允许不得转载!如有问题,欢迎指正。 https://blog.csdn.net/zlw_spider/article/details/91344519

 输入框自动补全功能: 类似于百度搜索时,输入内容,出现候选项功能
  使用到的插件  js:jquery.wx.bigautocomplete.js
 
    由于这个出现的候选内容和几个参数都有关系,
    所以在出现候选词之前使文本框得到焦点时获取需要的参数数据。
       $(function(){                    
            $('#dayActiveRouteInitSELContainer input[name=search]').focus(function(){    //文本框得到焦点   
            $('#dayActiveRouteInitSELContainer input[name=search]').unbind();//取消绑定在搜索框上的事件(不取消事件会累加绑定在搜索框上)                
            
            var container = $('#dayActiveRouteInitSELContainer');          
            var xtree = $('#dayActiveRouteInitSELContainer .compselectCLS .treeC').data('xtree');
            var personCode=xtree.getselectid();       //获取人员     
             
            $('#dayActiveRouteInitSELContainer input[name=search]').wxBigAutocomplete({  //自动补全词条
               url:'${ctx}/dayActiveRouteAction.do?method=dayActiveRouteNameByAuto&personCode='+personCode,
               callback:function(data){
                  //自动补全词条
                  alert(data.result); //这是选中的候选词条
               }
            });
            
        });    
      })
    值得注意的是:$('#dayActiveRouteInitSELContainer input[name=search]').unbind('wxBigAutocomplete');这条语句很重要,
     文本框绑定了两个事件,应该取消绑定那个自动补全功能的方法
     没加这条语句之前,事件一直被触发,一直向后台请求数据。原因是事件wxBigAutocomplete一直被累加触发。

    action:
    CallHelper caller=new CallHelper("wx_getCustCondition");
        caller.setParam("compid", request.getParameter("compId"));
          // 这里不管你的页面的输入框的name是什么名称,这里都是keyword, js里面的保持一致。 
        caller.setParam("keyword", request.getParameter("keyword"));             
        caller.execute("idbwx");
        List<BasicDynaBean> list1=caller.getResult("results");
        List list=new ArrayList();
        for(BasicDynaBean bean:list1){
            Map map=new HashMap();
            map.put("title", bean.get("title"));
            map.put("result", bean.get("result"));
            list.add(map);
        }
        JSONObject json = new JSONObject();
        json.put("data", list);
        response.getWriter().write(json.toString());
        
        页面实现的效果:

展开阅读全文

没有更多推荐了,返回首页