欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-06 22:45:32
...

最近有项目要实现界面中业务类型文本框能自动补全,并且业务类型文本框随着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方法代替。

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

  • jquery的autocomplete插件实现自动补全和级联
            
    
    
        jQueryautocomplete插件级联 
  • 大小: 810 Bytes