自动完成“不是函数”

Question

我们已经在一个简单的 HTML 页面中测试了 Jquery UI（jquery-ui-1.8.10.custom.min.js）自动完成功能，它可正常工作。

然后我们将相同的代码复制到了一个 Asp.net 用户控件中，但它停止工作了。JavaScript 错误显示“$searchBox.autocomplete 不是函数”。

该用户控件被用在一个 Asp.net Sitefinity 3.7 项目中。页面上有一个 ScriptManager。不确定还能加什么...

有人知道发生了什么吗？

修正:

<script src="/js/jquery-1.5.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";

        $('input#searchInput').autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v', 'johannesburg b', 'johannesburg a', 'johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
            minLength: 3,
            open: function (e, ui) {

                var 
                acData = $(this).data('autocomplete'),
                styledTerm = termTemplate.replace('%s', acData.term);

                acData
                .menu
                .element
                .find('a')
                .each(function () {
                    var me = $(this);
                    me.html(me.text().replace(acData.term, styledTerm));
                });

            }
        });
    });
</script>
<div class="outerSearchBox">
    <div class="searchFieldWrapper">
        <input id="searchInput" type="text" class="searchField" /><a class="searchButton">SEARCH
        </a>
        <div class="searchSugContainer">

谢谢。

- Jacques

---

我找到了答案。我因为两次加载了jQuery库才会出现这个问题。https://dev59.com/_WIk5IYBdhLWcg3wG6o6 - Orin

Answer 1

那个错误通常意味着jquery或插件尚未加载。请检查您的函数调用是否在文档加载之前被触发：

$(function(){
    var $searchBox = $('#mysearchBox');
    $searchBox.autocomplete(...);
});

还要检查javascript文件的路径是否正确。使用Firebug或谷歌Chrome开发者工具可以检查这两个问题。

- Phil

---

我已经通过Firebug确认文件正在下载并且顺序正确。先是JQuery，然后是JQuery UI，最后使用自动完成功能。 - Jacques

你有可能重新审视一下这个问题吗？ - Jacques

Answer 2

可能是以下原因之一：

1. jquery.js 加载的顺序不正确。
2. 同一页面中包含重复的 jquery.js 引用。

- Ramnath

---

当我创建一个新的.Net Core应用程序时，我遇到了相同的消息。我在_Layout.cshtml文件的顶部添加了Jquery/JQueryUI引用，但事实证明JQuery库默认是在页面主体呈现后被添加到页面底部的。我将其注释掉后，它就正常工作了。 - Nick

Answer 3

也许可以尝试使用jQuery.noConflict()方法进行测试。它基本上只是让您使用不同的别名来代替jQuery。在我的SF4.3中，这个方法很有效。

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

- Patrik Affentranger

Answer 4

我遇到了这个问题，原因是我的jQuery文件加载了两次。实际上我的想法是：

<script src="assets/js/jquery.min.js"></script>
<script src="js_css/jquery-ui.min.js" ></script>

然后我有一个AJAX调用，可以加载文档的更多部分，还有一个：

<script src="assets/js/jquery.min.js"></script>

我的AJAX结果中有script标签，我在将结果$.html()到文档中。这样做实际上重新定义了所有被jquery-ui.min.js改变或利用的变量。

- Jermel

Answer 5

这是由于与Sitefinity自身使用jQuery的冲突引起的。

如果您将jQuery的脚本引用移动到页面底部，在闭合表单标记之前。这将解决Sitefinity 4.0中的问题，但我认为它也会修复Sitefinity 3.7中的此问题。

- Al Harding