jQuery UI自动完成不显示建议

时间:2012-01-25 22:50:58

标签: jquery jquery-ui

我使用以下代码动态创建INPUT元素并为其分配自动完成功能。 .autocomplete行存在一些问题,因为将元素添加到td的下一行永远不会被执行。

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];

var fileCodeAutoComplete = $("<input/>");

$(fileCodeAutoComplete).autocomplete({
    source: availableTags
}); 

$(td).append(fileCodeAutoComplete);

有什么想法吗?

更新1:

我在自动完成调用周围放置了一个try-catch,发现错误是:

“对象不支持此属性或方法”。

这很奇怪,因为我已经在页面中添加了jquery-ui引用。

更新2:

我将代码更新为以下内容并仍然收到“对象不支持此属性或方法”。

var fileCodeAutoComplete = $("<input/>");
    $(fileCodeAutoComplete).attr("id", "fileCodeAutoComplete"); 

    try {
        $("input#fileCodeAutoComplete").autocomplete({
            source: availableTags
        });
    }
    catch(ex) {
        alert(ex.message); 
    }

    $(td).append(fileCodeAutoComplete);

更新3:我制作了一个新项目并复制粘贴代码并且它可以正常运行,但在现有项目中似乎没有用。我认为可能是微软图书馆正在阻碍。

更新4:解决方案

问题在于其他人指的是jQuery的旧版本,它正在搞乱jQuery UI框架。

5 个答案:

答案 0 :(得分:3)

var fileCodeAutoComplete = $("<input/>");

尝试使用选择器而不是标签,例如

<input id="autocomplete" />

然后你给

$("input#autocomplete").autocomplete({
source: availableTags
});

您可以参考link

答案 1 :(得分:1)

您是否尝试过向输入标记添加属性?类似的东西:

var fileCodeAutoComplete = $("<input type='text' />");

此外,如何尝试在已知输入元素上自动完成以查看自动完成功能是否打破它,或者如果它是您要添加功能的动态输入字段?

答案 2 :(得分:1)

宣布:

var fileCodeAutoComplete = $("<input/>");

它已经是一个jquery对象,你不必再次将它包装在$()中。您还可以链接创建输入和自动完成:

var fileCodeAutoComplete = $("<input/>")
    .autocomplete({
        source: availableTags
    })
    .appendTo(td);

答案 3 :(得分:0)

您的解决方案适合我:

http://jsfiddle.net/L8yvb/

答案 4 :(得分:0)

在JS Fiddle为我工作:http://jsfiddle.net/bH9ab/1/

我几乎逐字地使用了您的原始代码(除了模拟表格单元格以附加输入)。

要验证对jQuery UI的引用是否正确(并且它在本地计算机上没有损坏,截断等),您可以指向Google的CDN:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js