jQuery autocomplete自动提示报错 无法读取undefined的length属性

• 核心问题：autocomplete() 是jQuery UI组件库提供的扩展方法，jQuery核心库本身不包含这个方法。如果页面只加载了jQuery核心JS、没有按顺序加载jQuery UI的JS文件和配套样式文件，调用方法时组件内部逻辑无法正常初始化，读取未定义配置的length属性就会抛出对应类型错误，直接导致自动提示功能完全失效。
• 代码细节问题：
  • 候选词数组最后一项"Four",末尾多了冗余逗号，部分低版本浏览器解析时会在数组末尾生成一个undefined空项，触发匹配逻辑的length读取错误
  • placeholder是原生input标签的属性，不属于autocomplete组件的配置参数，写在初始化配置里不会生效

HTML部分 #

<!-- 依赖加载顺序不能乱：1. jQuery核心库 2. jQuery UI样式文件 3. jQuery UI JS文件 -->
<input type="text" id="text" value="text" placeholder="Select Transporter..." />

JS部分 #

$(function () {
    const candidateList = [
        "One",
        "two",
        "Three",
        "Four" // 移除末尾多余逗号
    ];
    $("#text").autocomplete({
        minLength: 0,
        delay: 0,
        source: candidateList
    });

    // 可选扩展：输入框聚焦时直接展示全部候选词，不需要输入字符就触发提示
    $("#text").on("focus", function () {
        $(this).autocomplete("search", "");
    });
});

• 轻量无依赖方案：学习HTML原生<datalist>标签的用法，不需要引入任何第三方库即可实现基础的输入自动建议，适合简单业务场景
• jQuery UI Autocomplete进阶用法：查阅本地引入的jQuery UI库配套官方文档，掌握自定义数据源（支持接口返回动态数据）、候选项自定义渲染、选中事件回调等进阶配置
• 原生手写实现参考：核心逻辑分为三部分：监听输入框的输入/聚焦事件、根据输入值过滤匹配候选词、将匹配结果生成下拉浮层定位到输入框下方，支持键盘上下选择、点击填充等交互即可，没有复杂的黑盒逻辑

内容的提问来源于stack exchange，提问作者Baba Ranjith