Блог

Главная - Вопросы по программированию - Автозаполнение для случайных нескольких идентификаторов

Автозаполнение для случайных нескольких идентификаторов

#javascript #php #jquery #ajax #autocomplete

#javascript #php #jquery #ajax #автозаполнение

Вопрос:

У меня есть случайные поля для записей. Мне нужно автозаполнение с помощью java script и 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:

Используйте .on()

вы добавляете элемент с классом name динамически, поэтому элементы, которые не предварительно доступны в DOM ready, не получают привязанный к нему обработчик событий.

вам нужно делегировать событие, чтобы прикрепить обработчик события к родительскому элементу, присутствующему в 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
        });
    });
});

Комментарии:

1. извините, дорогой, это не работает. посетите computerdada.com/slip1.php здесь новый код

2. он работает, но новая проблема заключается в том, что при попытке выбрать из списка также происходит обновление записи

3. @SagarSaroha По какой проблеме я не могу с вами связаться??

4. пожалуйста, посетите computerdada.com/slip1.php и введите lan, затем попробуйте выбрать опцию 4 lan с помощью клавиш со стрелками вниз. он обновляет список, когда ключ свободен (keyup)

5. @SagarSaroha Попробуйте change вместо keyup .