Question

我正在使用自动填充功能并在表单中添加输入框jquery函数。

他们在单独使用时工作正常。

这是自动完成功能

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

</script>

这是添加输入框查询

<script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {

        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fMiktar = $("<input type=\"text\" class=\"miktar\" name=\"miktar[]\" size=\"6px\" />");          
        var fOlcu = $("<select name=\"olcu[]\" onChange='showSelected(this.value)' class=\"olcu\" id=\"olcu\">Olcu</option> /"+'<?php while($olculer=mysql_fetch_array($hangiolcu2)){ echo "<option value=\"$olculer[olcu]\">$olculer[olcu]</option>";} ?>'+"</select>");
        var fMalzeme = $("<input type=\"text\" name=\"malzeme[]\" class=\"malzeme\" id=\"tamamla\" />");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fMiktar);
        fieldWrapper.append(fOlcu);
        fieldWrapper.append(fMalzeme);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });

});
</script>

我如何一起使用这些脚本。

  var fMalzeme = $("<input type=\"text\" name=\"malzeme[]\" class=\"malzeme\" id=\"tamamla\" />");

使用#add函数添加新的输入框字段时，自动完成功能正常工作。

由于

Answer 1

您的问题是，在您的第一个函数中，您在具有指定ID的元素上调用.autocomplete()函数，但是您正在创建具有相同ID的更多元素。 ID必须是唯一的，因此您不能使用ID tamamla拥有多个元素。从您正在创建的新HTML中删除重复的ID后，您可以在add函数中执行类似的操作，然后将所有内容附加到#buildyourform元素：

$("#add").click(function() {

    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    var fMiktar = $("<input type=\"text\" class=\"miktar\" name=\"miktar[]\" size=\"6px\" />");          
    var fOlcu = $("<select name=\"olcu[]\" onChange='showSelected(this.value)' class=\"olcu\" id=\"olcu\">Olcu</option> /"+'<?php while($olculer=mysql_fetch_array($hangiolcu2)){ echo "<option value=\"$olculer[olcu]\">$olculer[olcu]</option>";} ?>'+"</select>");
    var fMalzeme = $("<input type=\"text\" name=\"malzeme[]\" class=\"malzeme\" />");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });

    fieldWrapper.append(fMiktar);
    fieldWrapper.append(fOlcu);
    fMalzeme.autocomplete("tamamla.php", {
        width: 260,
        matchContains: true,
        selectFirst: false
    });
    fieldWrapper.append(fMalzeme);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
});

由于fMalzeme是使用jQuery选择器创建的元素，因此您可以像调用任何其他选定元素一样调用.autocomplete()函数。

结合两个JavaScript函数的问题

1 个答案: