$(function() {
  // 数据源：包含两个参数的数组（值和标签）
  var data = [
    { value: "1", label: "苹果 (水果)" },
    { value: "2", label: "香蕉 (水果)" },
    { value: "3", label: "胡萝卜 (蔬菜)" }
  ];
  
  $("#autocomplete-input").autocomplete({
    source: data,
    minLength: 1, // 触发自动完成的最小输入长度
    select: function(event, ui) {
      // 选择项时的处理
      console.log("选择的值:", ui.item.value);
      console.log("显示的标签:", ui.item.label);
    }
  });
});

$(function() {
  var data = [
    { id: "001", name: "张三", department: "技术部" },
    { id: "002", name: "李四", department: "市场部" },
    { id: "003", name: "王五", department: "人事部" }
  ];
  
  $("#autocomplete-input").autocomplete({
    source: data,
    minLength: 1,
    focus: function(event, ui) {
      // 防止输入框直接填充值
      return false;
    },
    select: function(event, ui) {
      $("#autocomplete-input").val(ui.item.name);
      $("#hidden-id").val(ui.item.id); // 存储ID到隐藏字段
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    // 自定义渲染项
    return $("<li>")
      .append("<div><strong>" + item.name + "</strong><br>" + item.department + "</div>")
      .appendTo(ul);
  };
});

// 确保数据源格式正确
console.log(data); // 检查数据结构
// 确保引入了必要的库
// <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
// <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

select: function(event, ui) {
  $(this).val(ui.item.label); // 显示标签而不是值
  return false; // 阻止默认行为
}

// 使用远程数据源
$("#autocomplete-input").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/search",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function(data) {
        response(data);
      }
    });
  },
  minLength: 2,
  delay: 300 // 延迟300ms减少请求
});

$(function() {
  var projects = [
    { id: 1, name: "项目A", client: "客户X" },
    { id: 2, name: "项目B", client: "客户Y" }
  ];
  
  $("#project-search").autocomplete({
    source: projects,
    select: function(event, ui) {
      $("#project-id").val(ui.item.id);
      $("#project-name").val(ui.item.name);
      $("#client-name").val(ui.item.client);
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<div><strong>" + item.name + "</strong><br>客户: " + item.client + "</div>")
      .appendTo(ul);
  };
});