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

Posted 2023-03-05

【中文标题】如何将 jquery ui 自动完成添加到动态创建的元素？

【英文标题】：How can I add jquery ui autocomplete to a dynamically created element?

【发布时间】：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 有效，但不是我的实际代码...

【参考方案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，你也可以看看***.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，你也可以看看***.com/questions/33410824/…。谢谢

你看看这个问题有没有解决办法：***.com/questions/38693916/…