jquery的autocomplete插件实现自动补全和级联

阅读更多

最近有项目要实现界面中业务类型文本框能自动补全，并且业务类型文本框随着ip地址的改变而改变，即级联，级联并不复杂，难的是在autocomplete插件中实现级联，因为autocomplete只初始化第一次，后面调用初始化方法也只会在前一次的下拉选项中添加新的选项，无法实现级联，查过很多资料，网上说flexselect能够实现级联，但是flexselect对高版本1.7的jQuery不支持自动补全，所以放弃了flexselect方案，最后，这个问题经过我的多次努力终于得到了解决，希望能帮助到其他的遇到同样问题的人。

步骤：

1.引入js，css文件，样式。

2.加入ip地址，业务类型文本框。

   * IP：
   

  * 业务类型：
   
   

3.js编码实现级联。

$(function(){
 $('#ip').change(function(){
    cu.post({        
          url:'perf/performance!getBusiType.action',
             data:{
              ip:$("#ip").val()
             },
          success:function(data){
           $("#busiType").val('');
           busiType = data;
           //每次都重新生成dom对象，并初始化autocomplet控件。
          var busiTypeDom = $("#busiType").clone();
          $("#busiType").remove();
          busiTypeDom.appendTo($("#busiTypeTd"));
        $("#busiType").autocomplete(busiType,{minChars:0,cacheLength:1,matchContains:true})
           .result(function(event,busiType,formatted){ 
           });
      index++;
    } 
    });
  });

});

注意：js代码中的cu.post方法是公司框架的基础方法，功能是发送ajax异步请求，可以使用jQuery的ajax方法代替。

本人第一次写博客，写得不好不要见惯，有问题可以给我留言，谢谢。

• 
• 大小: 810 Bytes

• 查看图片附件