“自动完成不是功能”Javascript 错误

Question

在我的 Grails 项目（2.2.1 版）中，我在两个不同的 GSP 页面中使用了以下 Javascript 代码。

<g:javascript>
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "/medicalOfficeManager/Patient/getAllPatients",
        dataType: "json",
        success : function(response) {
            //Create a map.
            var data =
                    $.map(response, function(item){
                        console.log("id: " + item.id);
                        console.log("name: " + item.surname + " "+ item.name);
                        return{
                            id: item.id,
                            value: item.surname + " " + item.name
                        }
                    });


            $("#patient_textField").autocomplete({
                source: data,
                select: function (event, ui){
                    console.log("selected id:" + ui.item.id);
                    console.log("selected name:" + ui.item.value);

                    //when a country is selected(ie: type China and press enter),
                    //change the value of hidden field to the country's id.
                    $('#patient_id').val(ui.item.id);
                    console.log("patient value = "+ $('#patient_id').val());
                }
            });

        }
    });

});
</g:javascript>

在一个 GSP 中，一切都按预期工作，在另一个 GSP 中，查看 Javascript 控制台，我有以下错误：

$(...).autocomplete 不是函数

我已经阅读了this 的讨论，但它对我不起作用。

有什么建议吗？

编辑：我注意到页面之间的唯一区别是，在不工作的页面中，它加载了 bundle-bundle_core_head.js，但我看不到它在 gsp 页面中的加载位置...

EDIT2：在其他 gsp 中加载了一个包含早期版本的 JQuery 和 JQuery UI 的组件，但我需要该组件，因为如果我评论它，另一个允许我选择日期和时间的字段不起作用。可以同时使用吗？

Answer 1

autocomplete 函数可能是由一个 jQuery 插件提供的，您将其包含在一个页面中，而不是另一个页面。查看每个页面的来源并比较每个页面中的<script> 元素。