Jquery UI 自动完成：标签和值都表现得像值

Question

我正在使用 Jquery UI 的自动完成功能。

我遇到的问题是：当我使用外部数据源时，标签和值的行为都像值。

换句话说，当我使用单个标签和值对引用外部数据源时，标签和值作为两个选项一起出现在下拉列表中。

换句话说，它们都显示为值，而不是显示为标签和值。

当你点击其中任何一个时，alert alert(ui.item.label);显示其值，无论是标签还是值。

我不明白为什么标签和值都表现得像值，特别是因为我已经在 json 源中清楚地标记了它。

问题不会出现在本地数据源上，而只会出现在外部数据源上。

这是本地代码：

<script>
    $(document).ready(function() {
        $("#inputbox").autocomplete({
            source: "sd/aa.php",
            minLength: 3,
            select: function(event, ui) {
                alert(ui.item.label);
                alert(ui.item.value);
            }
        });
    });
</script>

<input id="inputbox" />

Answer 1

为什么……也许

当使用 jQuery Autocomplete 时，在使用复杂对象时，它需要标签和值的特定属性。

例如，一个有自定义属性的对象，我们会说Id和Description，Autocomplete会寻找一个标签 和 value 属性。如果您只定义一个 label OR value 属性，它将将该属性用于 label 和 值显示。

外部服务应该返回一个如下所示的对象：

[{
    //Your custom properties
    id: 78923,
    description: 'A very nice widget',
    //Below are autocomplete specific properties
    label: 'Nice Widget A',
    value: '$19.99'
}]

---

可能的解决方案

1. 让这个工作的第一个方法是调整你的服务来添加一个 label 和 value 属性到返回给客户端的 json。

2. 如果您无法控制服务，则第二种方法是 而是进行 AJAX 调用，并在 success 事件函数中，您 可以手动映射结果并使用新的扩展对象 属性。

   ...
   source: function (request, response) {
       $.ajax({
           url: "/my/service?term=" + escape(request.term),
           type: "GET",
           contentType: "application/json",
           dataType: "json",
           success: function (data) {
               var mappedResults = $.map(data, function (item) {
                   //Extend the service data with a label and value property that autocomplete uses
                   return $.extend(item, { label: item.description, value: item.id });
               });
   
               response(mappedResults);
           }
       });
   }
   ...
   

如果您希望将服务提供的其他值用于其他用途，这也很有用。这些可以通过 Autocomplete 函数的任何事件以ui.item.[yourProperty] 的形式访问。因此，如果我对 Autocomplete 小部件的 select 事件进行回调，我可以通过 ui.item.description 访问描述。