jQuery Autocomplete

自动完成（Autocomplete）指用户输入时下拉框实时给出候选、点选即可回填，常见于搜索框、城市与标签输入，能显著减少打字量。jQuery UI 的 autocomplete 组件开箱即用，数据源既可以是本地数组，也可以是服务器返回的 AJAX 结果，是"输入联想"类需求的经典实现。

1. 引入 jQuery UI

autocomplete 属于 jQuery UI，需同时引入 jQuery、jQuery UI 的 JS 与 CSS：

<link href="https://example.com/jquery-ui.min.css" rel="stylesheet">

说明：示例中的 https://example.com 地址为占位域名，实际使用请替换为官方 CDN 或本地文件路径。
<script src="https://example.com/jquery.min.js"></script>
<script src="https://example.com/jquery-ui.min.js"></script>

2. 本地数组数据源

source 直接给字符串数组，组件自动过滤并把候选渲染成下拉列表：

<input type="text" id="city" placeholder="输入城市试试">
<p id="pick"></p>
<script>
var cities = ["北京", "上海", "广州", "深圳", "杭州", "南京"];
$("#city").autocomplete({
  source: cities,
  select: function (event, ui) {          // 选中某一项时触发
    $("#pick").text("你选择了：" + ui.item.value);
  }
});
// 效果：输入"上"后下拉出现"上海"；点击它，输入框自动填入"上海"，
// 同时下方显示"你选择了：上海"
</script>

3. 对象数组数据源

需要"显示与提交不同值"（显示名称、提交编号）时用对象数组：label 用于下拉显示，value 用于选中后回填：

var users = [
  { label: "张三 (zhangsan)", value: "zhangsan" },
  { label: "李四 (lisi)", value: "lisi" }
];
$("#user").autocomplete({ source: users });
// 效果：输入"张"出现"张三 (zhangsan)"，选中后输入框回填 zhangsan

4. 远程 AJAX 数据源

source 也可以是函数：在函数里发 Ajax 请求，把结果交给 response() 渲染：

$("#search").autocomplete({
  minLength: 2,                            // 至少输入 2 个字符才请求
  source: function (request, response) {
    $.ajax({
      url: "/api/search",
      data: { keyword: request.term },     // request.term 为当前输入
      dataType: "json",
      success: function (data) {
        response($.map(data, function (item) {
          return { label: item.name, value: item.name };
        }));
      }
    });
  }
});
// 效果：输入达到 2 个字符后请求 /api/search，返回结果渲染为下拉候选

5. 常用选项与事件

选项/事件	说明
source	数组、URL 或函数——本地 / 远程数据源三选一
minLength	触发查询的最少字符数，远程数据建议 ≥2
delay	两次请求的间隔毫秒数，起防抖作用
select / change	选中某项 / 输入值改变时触发

远程场景务必设置 minLength 与 delay，配合服务端模糊查询，避免每次按键都打满请求拖垮服务器。

小结

Autocomplete 把"输入联想 + 键盘上下选择 + 点选回填"封装成一个方法；数据源分本地数组、对象数组、AJAX 函数三种，远程使用时用 minLength 与 delay 做防抖，即可快速搭建带联想的搜索输入框。