自动完成随机多个ID

时间:2014-07-04 07:00:11

标签: javascript php jquery ajax autocomplete

我有条目的随机字段。我需要使用java脚本和php自动完成,但是当我尝试它时,只能自动完成第一个字段。

我的代码是:

<script type="text/javascript">
$().ready(function() {
    $(".name").keyup(function() {     
        $(".name").autocomplete("get_profile_list.php", {
            width: 260,
            matchContains: true,
            selectFirst: true
        });
    });
});
</script>
<script type="text/javascript">

function track() {
     var count = jQuery('.abc').length;
     jQuery('#track1').append('<span id="track1" class="abc"><br><input type="text" name="name[]" id="name-'+count+'" class="name" value="" size="35"/><input type="text" name="qty[]" id="qty-'+count+'" value="" size="1"  onchange="return track();" /><input type="text" name="price[]" id="price-'+count+'" value="" size="1"/></span>'); 
}

$('input').live("keypress", function(e) {
    /* ENTER PRESSED*/
    if (e.keyCode == 13) {
        /* FOCUS ELEMENT */
        var inputs = $(this).parents("form").eq(0).find(":input");
        var idx = inputs.index(this);

        if (idx == inputs.length - 1) {
            inputs[0].select()
        } else {
            inputs[idx + 1].focus(); //  handles submit buttons
            inputs[idx + 1].select();
        }
        return false;
    }
});
</script>

</head>

<body>

    <?php date_default_timezone_set("Asia/Kolkata");?>

    <form name="form" method="post">
        Party Name : <input type="text" name="customer" size="30" />
        Date and Time : <input type="hidden" name="edt" value="<?php echo date("d-m-Y h:i:s", time());?>"/><?php echo date("d-m-Y h:i:s", time());?>
        <br><br>
        <strong>Products Details</strong>
        <div id="main">
            <span id="track1" class="abc">
            <input type="text" name="name[]" id="name-0" class="name" value="" size="35" /><input type="text" name="qty[]" id="qty-0" value="" size="1"  onchange="return track();" /><input type="text" name="price[]" id="price-0" value="" size="1"/>
            </span>
            <div id="display">
            </div>
        </div>
        <br><br>
        Receiver Name<input type="text" name="receiver" /><br>
        <input type="submit" name="submit" />
    </form>
</body>
</html>

例如,请访问http://computerdada.com/slip1.php

在产品详细信息中,第一个输入框是产品名称,请用文字测试 key,lan。

感谢。

1 个答案:

答案 0 :(得分:2)

使用.on()

您正在动态添加类name的元素,因此不准备在DOM准备的元素不会附加事件处理程序。

您需要Event Delegation将事件处理程序附加到DOM ready中的父元素。

$(document).ready(function () {
    $('#track1').on('keyup', '.name', function () {
        $(this).autocomplete("get_profile_list.php", {
            width: 260,
            matchContains: true,
            selectFirst: true
        });
    });
});

<小时/> 在OP发表评论后更新。

正在使用jQuery v1.3.2

因此您必须使用.live()

$(document).ready(function () {
    $('.name').live('keyup', function () {
        $(this).autocomplete("get_profile_list.php", {
            width: 260,
            matchContains: true,
            selectFirst: true
        });
    });
});