您现在的位置: 爱51代码网 >> 范文 >> 文章正文
jQuery Autocomplete not working for Dynamic Add Form Fields

<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="../js/jquery.ui.datepicker-zh-CN.js"></script>
<!-- Tablesorter: required -->
<link href="../css/tablesorter.blue.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>
 
var cache = {};  
var AC_seting = {
      minLength: 3,
      source: function( request, response ) {
        var term = request.term;
        if ( term in cache ) {
          response( cache[ term ] );
          return;
        }
 
       $.getJSON( "search.php?Action=2", request, function( data, status, xhr ) {
          cache[ term ] = data;
          response( data );
        });
      },
      select: function(event, ui){
        // 这里的this指向当前输入框的DOM元素
        // event参数是事件对象
        // ui对象只有一个item属性,对应数据源中被选中的对象
        var iRows = $(this).attr("id").split("_")[1];
        var sItemNo = ui.item.label;
        $(this).val(ui.item.value);
        $("#gName_"+iRows).val( sItemNo);
        $("#iP_"+iRows).val( ui.item.iPrice);
        
        // 必须阻止事件的默认行为,否则autocomplete默认会把ui.item.value设为输入框的value值
        event.preventDefault();
     }
    };
 
$(".ui-icon-plus").on("click",function(){
        var vTb=$("#diaTab"); //得到表格ID=diaTab的jquery对象
        //所有的数据行有一个.CaseRow的Class,得到数据行的大小
        vNum=$("#diaTab tr").filter(".CaseRow").size()+1;//表格有多少个数据行
        var vTr=$("#diaTab #trDataRow_1"); //得到表格中的第一行数据
        var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone
        //console.debug(vTrClone.toSource());
        vTrClone[0].id="trDataRow_"+vNum;//設置 第一個Id為當前獲取索引;防止重複添加多個ID為trDataRow1的數據行;一次添加一個;
        //vTrClone.filter(":input:eq(0)").attr("id","gId_"+vNum);
        vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方
        //序号更改
        $("#trDataRow_" + vNum +" td:eq(0)").html(vNum);
        $("#trDataRow_" + vNum + " td").each(function() { //循环克隆的新行里面的td
                $(this).find("input[type='text']").val(""); //清空克隆行的数据
                //修改相关属性
                $(this).find("input[name='iGoodsId_1']").attr("id", "gId_" + vNum).attr("name", "iGoodsId_" + vNum);              
                $(this).find("input[name='iGoodsName_1']").attr("id", "gName_" + vNum).attr("name", "iGoodsName_" + vNum);
                $(this).find("input[name='iPrice_1']").attr("id", "iP_" + vNum).attr("name", "iPrice_1" + vNum);
                $(this).find("input[name='iNums_1']").attr("id", "iNo_" + vNum).attr("name", "iNums_" + vNum).val('1');
                $(this).find("input[name='iRebate_1']").attr("id", "iR_" + vNum).attr("name", "iRebate_" + vNum);
                $(this).find("input[name='iMemo_1']").attr("id", "iM_" + vNum).attr("name", "iMemo_" + vNum);
            });          
    });
 
//这个是母体行,功能正常
$( "#mCardNo" ).autocomplete({
      minLength: 3,
      source: function( request, response ) {
        var term = request.term;
        if ( term in cache ) {
          response( cache[ term ] );
          return;
        }
 
       $.getJSON( "search.php?Action=1", request, function( data, status, xhr ) {
          cache[ term ] = data;
          response( data );
        });
      },
      select: function(event, ui){
        // 这里的this指向当前输入框的DOM元素
        // event参数是事件对象
        // ui对象只有一个item属性,对应数据源中被选中的对象
        var iCardNo = ui.item.label;
        $(this).val(iCardNo);
        $("#BuyName").val( ui.item.value);
        $("#iJF").val( ui.item.credits);
        
        // 必须阻止事件的默认行为,否则autocomplete默认会把ui.item.value设为输入框的value值
        event.preventDefault();
     }
    });
<span style="color: #FF0000;">这个是clone后的行,autocomplete功能不好用,why?</span>
    $( "#gId_1" ).autocomplete({
      minLength: 3,
      source: function( request, response ) {
        var term = request.term;
        if ( term in cache ) {
          response( cache[ term ] );
          return;
        }
 
       $.getJSON( "search.php?Action=2", request, function( data, status, xhr ) {
          cache[ term ] = data;
          response( data );
        });
      },
      select: function(event, ui){
        // 这里的this指向当前输入框的DOM元素
        // event参数是事件对象
        // ui对象只有一个item属性,对应数据源中被选中的对象
        var iRows = $(this).attr("id").split("_")[1];
        var sItemNo = ui.item.label;
        $(this).val(ui.item.value);
        $("#gName_"+iRows).val( sItemNo);
        $("#iP_"+iRows).val( ui.item.iPrice);
        
        // 必须阻止事件的默认行为,否则autocomplete默认会把ui.item.value设为输入框的value值
        event.preventDefault();
     }
    });  


 
//输出编码头
@header("Content-Type: text/html; charset=gb2312");
 
$moMem = new saleRec();
if($_GET['Action']==1)
{
    //查询会员积分
    $maMemberAry = $moMem->_get_Ajax_MemberList( $_GET['term']);
    //print_r($maMemberAry);
    echo json_encode($maMemberAry);
}
elseif($_GET['Action']==2)
{
    //查询货品编码/名称/单价
    $maMemberAry = $moMem->_get_Ajax_ItemList( $_GET['term']);
    echo json_encode($maMemberAry);
}

 

需要注意2点:
1,$( "#gId_1" ).autocomplete 中的id值必须存在也整个页面中唯一
2,id=gId_1这个对象必须先生成之后,才能执行$( "#gId_1" ).autocomplete

id="gId_1"是原行,id="gId_2"是clone的行,已经修改ID,后添加autocomplete()不好好使。试着注册别的函数就好用啊!

可能是版本的问题,如果用1.9的就行.

  • 上一篇文章:

  • 下一篇文章: 没有了
  • 最新文章 热点文章 相关文章
    maven如何加自定义的包
    redhat 2.6 (santigo 5.6) vsftp
    shell如何实现自动填写操作执行下
    linux shell 文件配置sh:color:
    shell script语法一定要加path吗
    SecureCRT如何访问虚拟机vmWare中
    C#如何读取WINDOWS的放大系数
    cximge的图如何存入数据库并提取
    DBGRID控件显示查询结果文本类型
    TChart控件如何把表中右边的系列
    maven如何加自定义的包
    redhat 2.6 (santigo 5.6) vsftp
    shell如何实现自动填写操作执行下
    linux shell 文件配置sh:color:
    shell script语法一定要加path吗
    SecureCRT如何访问虚拟机vmWare中
    C#如何读取WINDOWS的放大系数
    cximge的图如何存入数据库并提取
    DBGRID控件显示查询结果文本类型
    TChart控件如何把表中右边的系列
    xml取不到createElement后的
    asp导出csv文件后数字会自动
    ajaxSubmit提交带有文本编辑
    easyUI控件表格最后一列空白
    长时间不操作页面,等再次操
    CANVAS有没有对颜色键的支持
    怎么样让ECharts从后台获取数
    AnyChat音视频引擎开发的软件
    Jquery/Javascript动态获取J
    js如何获取css设置的样式
     



    设为首页 | 加入收藏 | 网站地图 | 友情链接 |