动态添加行的自动完成使用Jquery

时间:2013-07-27 05:51:41

标签: jquery jquery-ui jquery-autocomplete

我无法在动态创建的行上加载自动完成功能。我想在调用函数添加行时向表中添加一个新行,动态创建的行应具有自动完成功能。我可以添加行,但自动完成功能无效。

function add_row(a) {
    count++;
    jQuery('#member').append('<tr id="row_' + counter + '"><td width="5%"align="center"    valign="middle" bgcolor="' + bgc + '">' + counter + '</td><td width="30%" bgcolor="' + bgc + '"><input name="parti_name[]" type="text" id="parti_name_' + counter + '" size="30" /><input type="hidden" name="cr_ac[]" id="cr_ac_' + counter + '" /></td><td width="20%" align="center" bgcolor="' + bgc + '"><input type="text" name="amount[]" id="amount_' + counter + '" class="am" onkeyup="calculateSum()" onchange="add_row()"/></td><td width="40%" align="center" bgcolor="' + bgc + '"><input name="narration[]" type="text" id="narration_' + counter + '" size="48" /></td><td width="5%" align="center" valign="middle" bgcolor="' + bgc + '"><img src="<?php echo base_url('images/the_delete_icon.png') ?>" width="16" height="16" /></td></tr>');
    counter++;
    jQuery("#parti_name_'+count+'").autocomplete({
        source: function (req, response) {
            $.ajax({
                url: "<?php echo site_url('search'); ?>",
                dataType: "json",
                success: function (data) {
                    var re = $.ui.autocomplete.escapeRegex(req.term);
                    var matcher = new RegExp("^" + re, "i");
                    response($.grep(data, function (item) {
                        return matcher.test(item.label);
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            event.preventDefault();
            $('#parti_name_' + count + '').val(ui.item.label);
            $('#cr_ac_' + count + '').val(ui.item.value);
        }

    });
}

我在页面的开头使用了这个:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-darkness/jquery-ui.css" media="screen"></link>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

1 个答案:

答案 0 :(得分:2)

连接中可能会出现错误,请使用正确的连接替换以下行并尝试:

jQuery("#parti_name_'+count+'")  

jQuery("#parti_name_"+count)