多个自动完成搜索字段答案

【问题标题】：Multiple autocomplete search fields多个自动完成搜索字段
【发布时间】：2015-01-22 04:23:01
【问题描述】：

我在文本输入上使用 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 代码的情况下添加另一个文本输入？

【问题讨论】：

首先，你为什么要在keypress handler..中初始化自动完成？！您确定要在每次按键时重新初始化它..？ “如果我正确，jQuery 的类选择器会选择第一个匹配的元素，因此 keypress 事件将在原始输入上触发。” - 你错了。顺便说一句，您可以自己测试并确认它...尝试一下，如果您在实施它时遇到困难，请告诉我们...

标签： javascript jquery html jquery-ui autocomplete

【解决方案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);
});

【讨论】：