当前位置：文江博客话题详情

添加字段后 jQuery UI 自动完成多个实例

发布于 2024-11-09 15:13:32 字数 136 浏览 4 评论 0原文

我正在使用 jQuery UI 自动完成插件，并且通过 jQuery 中的 append() 动态向表单添加新字段。问题是我想创建新添加的字段和自动完成字段，因此即使具有相同的源 URL，也会有超过 1 个自动完成字段。有什么帮助吗？

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痕至 2024-11-16 15:13:32

像这样？

var blahBlah = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: blahBlah
    });
    $("input#Bar").click(function() {
        var div = $("<div/>").text("Dynamically generated control").insertBefore("div:last");
        var input = $("<input/>").autocomplete({
            source: blahBlah
        }).appendTo(div);
    });
});

此处演示。

Like this?

var blahBlah = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: blahBlah
    });
    $("input#Bar").click(function() {
        var div = $("<div/>").text("Dynamically generated control").insertBefore("div:last");
        var input = $("<input/>").autocomplete({
            source: blahBlah
        }).appendTo(div);
    });
});

Demo here.

回复收藏 0 原文

相思碎 2024-11-16 15:13:32

在 append() 函数之后，您将对新字段调用 autocomplete()，并为其提供与原始字段相同的源。

回复收藏 0 原文

凯凯我们等你回来 2024-11-16 15:13:32

我知道这是一个较旧的问题，但我遇到了同样的问题并找到了解决方案。我发现的问题是使用 JQuery 的克隆函数创建新输入。自动完成功能似乎无法显示或工作。这种情况下的问题是克隆复制了所有内容，包括指向所复制输入的自动完成信息的原始自动完成信息。

为了解决这个问题，我手动创建了克隆，然后应用了自动完成功能，它开始工作。实际上它一直在工作，但它指向原始自动完成的显示。

要手动创建输入的副本，我执行了以下操作：

// note origInput = the input we are copying $("#myID")
var myClone = $("<input />")
                .attr("name", origInput.attr("name"))
                .attr("type", origInput.attr("type"))
                .attr("id", mynewid)
                .val("")
                .autocomplete( <your values here> );

myClone.appendTo(<parent where you want it to be>);

I know this is an older question, but I ran across the same issue and I found a solution. The issue I found was with using JQuery's clone function to create the new input. The autocomplete will not seem to display or work. The issue in this case is that the clone copies everything including the original autocomplete information that points to the autocomplete of the input that was copied.

To resolve this I manually created the clone, then applied the autocomplete and it started working. In actuality it was always working but it was pointing to the display of the original autocomplete.

To manually create the copy of the input I did the following:

// note origInput = the input we are copying $("#myID")
var myClone = $("<input />")
                .attr("name", origInput.attr("name"))
                .attr("type", origInput.attr("type"))
                .attr("id", mynewid)
                .val("")
                .autocomplete( <your values here> );

myClone.appendTo(<parent where you want it to be>);

回复收藏 0 原文

~没有更多了~