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

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

步骤：

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

<script type="text/javascript" src="js-libs/jquery/autocomplete/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js-libs/jquery/autocomplete/css/jquery.autocomplete.css">
<style type="text/css">
.ajaxInput{
 background-position: 0px center;
 margin-top: 5px; padding-left: 25px;
 background-image:url(theme/default/images/ajaxInput.gif);
 background-repeat: no-repeat;
   width:170px;
 height:20px;
}
</style>

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

   <th><span class="star">*&nbsp;</span>IP：</th>
   <td><s:textfield  id = "ip" name="queryform.ip"  cssclass="inputs" />

  <th><span class="star">*&nbsp;</span>业务类型：</th>
  <td id="busiTypeTd"> <input type="text" id="busiType" name="queryform.busiType" class="ajaxInput" title="输入关键字进行查询，双击显示前10条记录"/>
    </td>

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方法代替。

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