Question

这几乎是this问题的逐字帖。但是，一旦你转到jQuery 1.10，代码就不再有用了。

我确实更改了对“live”方法的调用，并将其切换为使用较新的“on”方法。我还需要做些什么来解决这个问题http://jsfiddle.net/sacredfaith/6t74T/458/？

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

$(document.body).on("keydown.autocomplete", "input.searchInput",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);
});

到目前为止，我的搜索已经产生了使用弃用的jquery库的方法。我需要一个更新的版本，但在过去几个小时的工作中无法找到成功...

编辑：小提琴链接和代码已更新，以反映“on”语法更改。
EDIT2：感谢您的耐心等待。

参考：对于1.10解决方案，请参阅所选答案的评论中的小提琴，否则使用1.9，直接在所选答案中查看小提琴。

Answer 1

您没有包含jquery ui库，也像动态元素一样使用它

$(document.body).on('focus', 'input.searchInput' ,function(){
    $(this).autocomplete(options);
});

<强> FIDDLE

Answer 2

您可以在一行中完成所有操作。正在使用 DEMO

 var addInput = function() {
    $("<input name='search' value='' class='searchInput' maxlength='20' />").appendTo("form#myForm").end().autocomplete(options).focus();
  };

if (!$("form#myForm").find("input.searchInput").length) {
    addInput();
}

$("input#addButton").click(addInput);
});

Answer 3

autocomplete创建一个附加到给定元素的新窗口小部件，因此每次输入时只需要调用一次，而不是每次按下键时都调用它。因此，您可以放弃整个代码块，只需在autocomplete函数中调用addInput即可。

我已更新your fiddle（还添加了jqueryUI JS和CSS）

var addInput = function() {
    var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
    $(inputHTML).appendTo("form#myForm");        
    $("input.searchInput:last").autocomplete(options).focus();
};

Answer 4

 $(document).on('focus', "input.searchInput", function() {
    $(this).autocomplete(options);
});

http://jsfiddle.net/6t74T/459/

如何在jQuery 1.10中为动态创建的元素添加jquery ui自动完成？

4 个答案: