如何将 jquery ui 自动完成添加到动态创建的元素？答案

【问题标题】：How can I add jquery ui autocomplete to a dynamically created element?如何将 jquery ui 自动完成添加到动态创建的元素？
【发布时间】：2011-10-03 23:54:50
【问题描述】：

我正在尝试让 jQueryUI AutoComplete 触发动态创建的表单输入元素，但它不起作用。我尝试在 $.live() 中使用 keyup.autocomplete 和 keydown.autocomplete 作为绑定事件，但它绑定到新元素 - 只有页面上已经存在的元素。

试用代码here（尝试在第一个输入中输入“ava”，然后单击“添加输入”并在新输入中输入相同的内容）。

JavaScript：

$(function() {
    $("input#addButton").click(function() {
        $("input.searchInput:last").clone(true).appendTo($(this).closest("form"));
        $("input.searchInput:last").val("");

    })

    $("input.searchInput").live("keydown.autocomplete", function() {
        $(this).autocomplete({
            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
        });
    })
});

HTML：

<form name="myForm" method="post">
    <input id="addButton" name="addButton" type="button" value="Add an input" />
    <input name="search" value="" class="searchInput" maxlength="20" />
</form>

【问题讨论】：

只是出于好奇，您是否尝试过在每次为创建的特定对象创建控件时执行绑定？故障排除的良好起点...
@Dutchie432：是的，我做到了 - jsfiddle.net/6t74T/2 - 结果相同。
@Eric：你的小提琴 (jsfiddle.net/6t74T/1) 在 Chrome 中对我有用。我也可以在添加的框上自动完成。
@MrChief：你说得对……它也适用于 IE8。嗯一定是IE9的问题....
只有在创建新输入后重置绑定时才能在 IE8 中工作 - jsfiddle.net/6t74T/2。 jsfiddle 有效，但不是我的实际代码...

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

函数 .live() 现已弃用。

看起来像这样的代码可以工作：

var options = {
    source: ["ActionScript", "AppleScript"],
    minLength: 2
};
var selector = 'input.searchInput';
$(document).on('keydown.autocomplete', selector, function() {
    $(this).autocomplete(options);
});

【讨论】：

更改接受的答案，因为这与新版本兼容。
谢谢你！刚刚帮助我解决了 Rails 3.2 中的嵌套表单字段问题，试图让自动完成功能正常工作！
你好@Andrei，你也可以看看stackoverflow.com/questions/33410824/…。谢谢
几乎为我工作，但我不得不将 $(this).autocomplete(options); 更改为 $(this).autocomplete({source : options});。
救命稻草！像魅力一样工作。

【解决方案2】：

这行得通：

$(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);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<form id="myForm" name="myForm" method="post">
  <input id="addButton" name="addButton" type="button" value="Add an input" />
</form>

【讨论】：

你好@Eric，你也可以看看stackoverflow.com/questions/33410824/…。谢谢
你看看这个问题有没有解决办法：stackoverflow.com/questions/38693916/…