jQuery Autocomplete功能异常：无法根据输入过滤建议项求助

嘿，我看你遇到了jQuery UI Autocomplete能显示列表但没法根据输入内容过滤的问题——这大概率是因为你的数据是自定义结构的对象数组，默认的自动过滤逻辑没法直接识别处理，得咱们自己写过滤逻辑才行。

问题根源 #

你的data数组里的每一项都是包含id、title、sku的自定义对象，而jQuery UI Autocomplete默认只对字符串数组或者带label/value属性的对象数组做自动过滤，对于这种自定义结构，必须通过自定义source函数来实现过滤逻辑。

修复后的完整代码 #

$(function() {
  var data = [
    { "id": 346575476, "title": "Oval Earrings with Sterling Filigree", "sku": "SSEM-4206" },
    { "id": 346574563, "title": "#1 Test Product (for HTML)", "sku": "hgf" },
    { "id": 5879687568, "title": "11 Crystal Station Necklace", "sku": "GCRYS-6373" }
  ];

  $('#skurdesc').autocomplete({
    minLength: 1, // 这里可以改成你需要的最小输入长度，比如0就是一聚焦就显示
    source: function(request, response) {
      // 把用户输入的关键词转成小写，实现不区分大小写的匹配
      var searchTerm = request.term.toLowerCase();
      
      // 过滤数据：匹配title或sku中包含关键词的项
      var filteredResults = data.filter(function(item) {
        return item.title.toLowerCase().includes(searchTerm) || item.sku.toLowerCase().includes(searchTerm);
      });

      // 把过滤后的结果转换成Autocomplete能识别的格式
      response(filteredResults.map(function(item) {
        return {
          label: `${item.title} (SKU: ${item.sku})`, // 下拉列表显示的文本，可自定义
          value: item.sku, // 选中后填入输入框的内容，也可以换成item.title
          id: item.id // 携带额外的ID信息，方便后续业务处理
        };
      }));
    },
    // 可选：选中下拉项后的回调操作
    select: function(event, ui) {
      // 比如在这里可以把选中的商品ID存到隐藏域，或者做其他业务逻辑
      console.log('选中的商品ID:', ui.item.id);
      // 如果想自定义输入框的内容，可以取消下面两行的注释
      // $(this).val(ui.item.label);
      // return false;
    }
  });
});

关键说明 #

• 自定义source函数：这是实现过滤的核心，request.term就是用户当前输入的内容，我们用filter方法遍历数据，匹配title或sku字段（转小写是为了提升用户体验，避免大小写敏感）。
• 结果格式转换：用map把自定义对象转换成Autocomplete要求的结构，label控制下拉列表显示的内容，value控制选中后填入输入框的内容，你可以根据需求调整这两个字段。
• 依赖检查：确保你已经在页面中正确引入了jQuery和jQuery UI的JavaScript及CSS文件，否则Autocomplete功能根本无法正常运行。

内容的提问来源于stack exchange，提问作者Pavan Karumuri