Автозаполнение добавленного поля в JQuery

Я использую JQuery для создания дополнительных полей ввода, щелкнув ссылку. В настоящее время у меня реализован плагин автозаполнения, который отлично работает для полей, созданных при загрузке страницы. Когда пользователь добавляет новые поля, автозаполнение не работает для этих конкретных полей. Мне просто было интересно, может ли кто-нибудь помочь мне понять, как заставить его работать.

<script type="text/javascript">
    $(document).ready(function() {
        $('#addingredient').click(function() {
            $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
            .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
            .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
            .appendTo('#ingredients')
            .hide()
            .fadeIn('normal');
        });
</script>

<script>
    $(document).ready(function(){
        var data = "http://mywebsite.com/ingredients.php";
        $(".ingredient").autocomplete(data);
    });
</script>


<ul id="ingredients">
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
    <li><input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" /><input type="text" class="amount" name="amount[]" id="amount[]" size="5" /><select class="unit" name="unit[]" id="unit[]"><?=$units ?></select></li>
</ul>

jquery autocomplete
person Joe Phillips    schedule 24.04.2009    source источник
comment
Используйте ответ tvanfosson.   -  person Kezzer    schedule 24.04.2009

Ответы (4)


arrow_upward
3
arrow_downward

Вам нужно повторно запустить автозаполнение для нового элемента после того, как он был добавлен в DOM. Следующее будет ждать, пока элемент не исчезнет, ​​а затем настроит автозаполнение для нового элемента с правильным классом.

<script type="text/javascript">
    var data = "http://mywebsite.com/ingredients.php";
    $(document).ready(function() {
        $('#addingredient').click(function() {
            $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
            .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
            .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
            .appendTo('#ingredients')
            .hide()
            .fadeIn('normal', function() {
                $(this).find('.ingredient').autocomplete(data);
            });
        });
        $(".ingredient").autocomplete(data);
    });
</script>
person tvanfosson    schedule 24.04.2009
comment
Мне просто нужно сейчас заняться кешированием данных URL ... хрм. - person Joe Phillips; 24.04.2009

arrow_upward
2
arrow_downward

Потому что вы выполняете автозаполнение перед созданием нового. Он не просто автоматически применяет его, он делает это только тогда, когда DOM готов.

<script type="text/javascript">

$(document).ready(function() {
    $('#addingredient').click(function() {
        $('<li />').append('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />')
        .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
        .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
        .appendTo('#ingredients')
        .hide()
        .fadeIn('normal');

        var data = "http://mywebsite.com/ingredients.php";
        $('.ingredient').autocomplete(data);
    });
}

</script>

Попробуйте вместо этого.

person Kezzer    schedule 24.04.2009
comment
Это приведет к повторному запуску автозаполнения для всех элементов, а не только для нового. Это, наверное, нормально, но перебор. - person tvanfosson; 24.04.2009
comment
Да, я думал об этом как о том, что сделал. Если это небольшая сумма, это не должно сильно давить на браузер. - person Kezzer; 24.04.2009
comment
Просто интересно, насколько точно это отличается от моего ответа? (На что d03boy прокомментировал, что это не работает) - person Pim Jager; 24.04.2009
comment
Для дополнительной оплаты, как я могу НЕ запрашивать данные с веб-сайта каждый раз? Я не совсем уверен, как смешивать javascript и PHP в этом аспекте. - person Joe Phillips; 24.04.2009
comment
@ d03boy: ответ tvanfosson, безусловно, является наиболее правильным ответом в этой теме, а также наиболее эффективным. Используйте это. - person Kezzer; 24.04.2009

arrow_upward
1
arrow_downward

Проблема в том, что автозаполнение инициализируется только при загрузке страницы. Таким образом, он не добавляется к динамически добавляемым входам. Вы также должны добавить автозаполнение к ним, снова вызвав автозаполнение. Поэтому после того, как вы добавили новый ввод, просто снова вызовите функцию автозаполнения:

 $(".ingredient").autocomplete(data);
person Pim Jager    schedule 24.04.2009
comment
Это не сработало, потому что я неправильно его использовал. Другой код ясно дал понять, как его использовать, поэтому я его принял. В любом случае это был близкий вызов. - person Joe Phillips; 24.04.2009

arrow_upward
0
arrow_downward

Улучшение предыдущего ответа tvanfosson (предотвращение ненужного поиска в DOM):

<script type="text/javascript">
    var data = "http://mywebsite.com/ingredients.php";
    $(document).ready(function() {
        $('#addingredient').click(function() {
            var newIngredient = $('<input type="text" class="ingredient" name="ingredient[]" id="ingredient[]" size="60" />');
            $('<li />').append(newIngredient)
                .append('<input type="text" class="amount" name="amount[]" id="amount[]" size="5" />')
                .append('<select class="unit" name="unit[]" id="unit[]"><?=$units ?></select>')
                .appendTo('#ingredients')
                .hide()
                .fadeIn('normal');
            newIngredient.autocomplete(data);
        });
        $(".ingredient").autocomplete(data);
    });
</script>
person dyve    schedule 27.06.2011