4

我正在尝试在文本字段上使用 jquery 自动完成功能，以允许用户选择多个标签，如本示例所示，但出现错误Uncaught TypeError: Cannot read property 'autocomplete' of undefined。这是导致问题的代码，大部分是从链接中复制的。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var tags = [<?php
foreach($this->tags as $tag){
    echo "\"{$tag['name']}\",";
}
?>""];

$( "textarea:[name='tags']" ).autocomplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        alert($.ui);
        $.noConflict();
        alert($.ui);
        response( $.ui.autocomplete.filter(
            tags, extractLast( request.term ) ) );
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
});

错误来自response( $.ui.autocomplete.filter(源内部的行。出于某种原因$( "textarea:[name='tags']" ).autocomplete，它完全可以定义，但 $.ui.autocomplete 不是。

我在这个脚本上方包含了 jQuery 和 jQuery UI。这可能是什么原因造成的？

编辑：

我注意到，如果我把alert($.ui);它显示在自动完成功能之外[Object object]，但是如果我把相同的警报放在自动完成的源属性中，它是未定义的。用 $ 做同样的事情表明 $ 是在内部定义的，但 $.ui 不是。我在页面上也有一个日期选择器，它显示的是同样的东西，$.ui 没有在插件中定义。为什么在这些插件中未定义 jQuery UI？

编辑2：

将源属性放在$.noConflict()响应函数的正上方可以让它工作足够长的时间让我输入一个标签，然后它会使自动完成崩溃，尽管日期选择器仍然有效。我尝试将它放在创建函数中，这样它只会执行一次，但这只会禁用页面上的所有其他 jQuery。

我对 jQuery 或 Javascript 不是很有经验，但似乎 jQuery UI 插件正在删除别名。

4

3 回答 3

3

将您的代码包装在

$(document).ready(function() {
    // code here
});
于 2012-08-07T18:01:20.057 回答
2

如果您还没有，您可能还应该包含 jQuery it self。

于 2012-08-07T17:59:16.953 回答
1

我仍然不知道是什么原因造成的，但是设置了一个计数器和一个 if 语句，以便 $.noConflict 仅在解决问题后才执行。

于 2012-08-08T20:55:23.953 回答