多个自动完成搜索字段

彼得无敌

我在文本输入上使用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代码的情况下添加其他文本输入?

安斯曼·雅斯罗蒂亚(Anshuman Jasrotia)

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

请检查此链接:如何将iquery-ui-ui自动添加到动态创建的元素中

和这个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);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章