自动完成对JQuery的追加场 [英] Autocomplete on appended field in JQuery

问题描述

我使用JQuery创建通过单击链接而附加的输入字段。目前，我已经实现了一个自动完成插件，在网页加载时创建的领域工作正常。当用户添加新的字段的自动完成不适用于这些领域的具体工作。我只是想知道，如果有人可以帮助我弄清楚如何得到它的工作。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（'＃addingredient'）。点击（函数（）{
            $（'＆LT;李/>').append('<input类型=文本级=成分NAME =成分[]ID =成分[]大小=60/＆GT; '）
            .append（'＆LT;输入类型=文本级=量NAME =量[]ID =量[]大小=5/＆GT;'）
            .append（'＆LT;选择类=单位NAME =单位[]ID =单位[]＆GT;＆LT; = $单位＆GT;＆LT; /选择＆GT;'）
            .appendTo（'＃成分）
            。隐藏（）
            .fadeIn（正常）;
        }）;
＆LT; / SCRIPT＆GT;＆LT;脚本＆GT;
    $（文件）。就绪（函数（）{
        VAR数据=htt​​p://mywebsite.com/ingredients.php;
        $（成分）自动完成（数据）。
    }）;
＆LT; / SCRIPT＆GT;
＆LT; UL ID =成分＆GT;
    ＆LT;李＆GT;＆LT;输入类型=文本级=成分NAME =成分[]ID =成分[]大小=60/＆GT;＆LT;输入类型=文本级=量NAME =量[]ID =量[]大小=5/＆GT;＆LT;选择类=单位NAME =单位[]ID =单位[]＆GT;＆LT; ？= $单位＆GT;＆LT; /选择＆GT;＆LT; /李＆GT;
    ＆LT;李＆GT;＆LT;输入类型=文本级=成分NAME =成分[]ID =成分[]大小=60/＆GT;＆LT;输入类型=文本级=量NAME =量[]ID =量[]大小=5/＆GT;＆LT;选择类=单位NAME =单位[]ID =单位[]＆GT;＆LT; ？= $单位＆GT;＆LT; /选择＆GT;＆LT; /李＆GT;
    ＆LT;李＆GT;＆LT;输入类型=文本级=成分NAME =成分[]ID =成分[]大小=60/＆GT;＆LT;输入类型=文本级=量NAME =量[]ID =量[]大小=5/＆GT;＆LT;选择类=单位NAME =单位[]ID =单位[]＆GT;＆LT; ？= $单位＆GT;＆LT; /选择＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

您需要重新运行新的元素上自动完成，它已被添加到DOM之后。下面将等到元素已经在消退，然后建立自动完成与正确的类新的元素。

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    VAR数据=htt​​p://mywebsite.com/ingredients.php;
    $（文件）。就绪（函数（）{
        $（'＃addingredient'）。点击（函数（）{
            $（'＆LT;李/>').append('<input类型=文本级=成分NAME =成分[]ID =成分[]大小=60/＆GT; '）
            .append（'＆LT;输入类型=文本级=量NAME =量[]ID =量[]大小=5/＆GT;'）
            .append（'＆LT;选择类=单位NAME =单位[]ID =单位[]＆GT;＆LT; = $单位＆GT;＆LT; /选择＆GT;'）
            .appendTo（'＃成分）
            。隐藏（）
            .fadeIn（正常，函数（）{
                $（本）.find（'成分'）自动完成（数据）;
            }）;
        }）;
        $（成分）自动完成（数据）。
    }）;
＆LT; / SCRIPT＆GT;
 

I am using JQuery to create additional input fields via clicking a link. Currently, I have an autocomplete plugin implemented that works fine for the fields that were created on page load. When the user adds new fields the autocomplete does not work for those specific fields. I was just wondering if someone could help me figure out how to get it to work.

<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>

解决方案

You need to rerun the autocomplete on the new element, after it has been added to the DOM. The following will wait until the element has been faded in, then sets up the autocomplete on the new element with the correct class.

<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>

这篇关于自动完成对JQuery的追加场的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！