jqueryui甚至不创建Ui元素

这是我第一次使用jQueryUI。我遵循了这个文档，但它对我不起作用。当我在codepen中运行相同的代码时，它正在工作

执行autocomplete函数时没有任何错误，但它只是不创建建议列表（ul元素）

HTML:

{{--自动完成的jQuery UI--}
亲缘Id

剧本

<script>
  $(document).ready(function() {
    var availableTutorials = [
      "ActionScript",
      "Bootstrap",
      "C",
      "C++",
    ];

    $('#create-affinity-id').autocomplete({
      source: availableTutorials
    });
  }
  });
</script>

$（文档）.ready（函数（）{
var AvailableAutorials=[
“动作脚本”，
“引导”，
“C”，
“C++”，
];
$（“#创建关联id”）。自动完成({
资料来源：AvailableAutorials
});
}
});

两个语法错误extra

，

和extra

{

用这个替换js代码

$(document).ready(function(){
   var availableTutorials  =  [
                            "ActionScript",
                            "Bootstrap",
                            "C",
                            "C++"
                        ];
                        $('#create-affinity-id').autocomplete({
                            source: availableTutorials
                        });

});

{{--自动完成的jQuery UI--}
亲缘Id
$（文档）.ready（函数（）{
var AvailableAutorials=[
“动作脚本”，
“引导”，
“C”，
“C++”
];
$（“#创建关联id”）。自动完成({
资料来源：AvailableAutorials
});
});

您在控制台中看到任何错误吗？看起来您有

头设置。AvailableAutorials数组的最后一个元素后面有一个额外的逗号。我在这里处理您的代码。检查页面上的重复ID。没有。我没有看到任何错误。@twistyLoad jQuery UI js在引导之前。删除额外的
}
from document.ready.对我来说仍然不起作用，但我可以看到代码片段起作用了。还有什么问题可以发送chrome控制台窗口按键的文字或图片（F12）
$(document).ready(function(){
   var availableTutorials  =  [
                            "ActionScript",
                            "Bootstrap",
                            "C",
                            "C++"
                        ];
                        $('#create-affinity-id').autocomplete({
                            source: availableTutorials
                        });

});