jquery-ui autocomplete:在下拉列表中显示ID-Name对的列表，但ID隐藏

jquery-ui autocomplete是一个基于jQuery和jQuery UI的插件，用于实现自动完成功能。它可以在输入框中提供一个下拉列表，根据用户输入的内容动态过滤并显示匹配的选项。

对于需要在下拉列表中显示ID-Name对的情况，可以通过以下步骤实现：

1. 准备数据：准备一个包含ID和Name的数据源，可以是一个数组或者从服务器获取的JSON数据。
2. 初始化插件：使用jQuery选择器选中目标输入框，并调用autocomplete()方法进行初始化。可以通过设置参数来配置插件的行为，例如最小字符数、延迟时间、匹配方式等。
3. 自定义显示格式：通过设置插件的source参数，指定数据源，并使用一个自定义函数来处理数据的显示格式。在这个函数中，可以根据ID和Name生成需要显示的文本，并将ID存储在元素的data属性中。
4. 处理选中事件：通过设置插件的select参数，指定一个回调函数来处理用户选中某个选项的事件。在这个函数中，可以获取选中项的ID和Name，并将ID赋值给隐藏的ID输入框。

下面是一个示例代码：

// 准备数据源
var data = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" }
];

// 初始化插件
$("#inputBox").autocomplete({
  source: data,
  minLength: 1,
  delay: 300,
  select: function(event, ui) {
    // 处理选中事件
    var selectedId = ui.item.id;
    var selectedName = ui.item.name;
    $("#hiddenIdInput").val(selectedId);
  }
}).autocomplete("instance")._renderItem = function(ul, item) {
  // 自定义显示格式
  return $("<li>")
    .append("<div>" + item.id + " - " + item.name + "</div>")
    .appendTo(ul);
};

在上述代码中，#inputBox是目标输入框的选择器，#hiddenIdInput是隐藏的ID输入框的选择器。data是数据源，可以根据实际情况进行替换。通过自定义的_renderItem函数，可以将ID和Name显示在下拉列表的每个选项中。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云数据库（TencentDB）。腾讯云云服务器提供可扩展的计算能力，适用于各种应用场景。腾讯云数据库提供高性能、可扩展的数据库服务，支持多种数据库引擎。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云数据库产品介绍链接地址：https://cloud.tencent.com/product/cdb