Question

我在文本输入上使用jQuery UI自动完成小部件。此文本输入用于将产品添加到数据库。

这是我的代码：

HTML：

<div class="form-group">
    <input type="text" class="form-control" placeholder="Termék kiválasztásához kezdjen el gépelni..." id="search">
    <div id="autocomplete"></div>
</div>

JS：

$('#search').on('keypress', function () {
    $(this).autocomplete({
        appendTo: "#autocomplete",
        autoFocus: true,
        minLength: 0,
        source: "array - ommited for clarity"
    });
});

我想添加一个添加另一个输入字段的按钮，以便用户可以将另一个产品添加到数据库中。

我的问题是，如果我复制我正在使用的HTML，我将拥有多个具有相同ID的元素。当然，逻辑移动将用类替换ID，但是如果我正确的话，jQuery的类选择器选择第一个匹配的元素，因此keypress事件将触发原始输入。

如何在不复制我的javascript代码的情况下添加其他文字输入？

Answer 1

您可以使用class而不是Id选择器。

请检查此链接：how-can-i-add-jquery-ui-autocomplete-to-a-dynamically-created-element

和jsfiddle

<form id="myForm" name="myForm" method="post">
<input id="addButton" name="addButton" type="button" value="Add an input" />

$(function() {
var options = {
    source: [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ],
    minLength: 2
};

$("input.searchInput").live("keydown.autocomplete", function() {
    $(this).autocomplete(options);
});

var addInput = function() {
    var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
    $(inputHTML).appendTo("form#myForm");
    $("input.searchInput:last").focus();
};

if (!$("form#myForm").find("input.searchInput").length) {
    addInput();
}

$("input#addButton").click(addInput);
});

多个自动填充搜索字段

1 个答案: