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

Question

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

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

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

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

当您单击其中任何一个时，警报 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，自动完成将查找标签和值属性。如果您只定义了一个标签 OR 值属性，它将为显示的标签和值使用该属性。

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

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

可能的解决方案

1. 使其工作的第一种方法是调整您的服务以向返回给客户端的 json添加 标签和值属性。

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

   ...
   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);
           }
       });
   }
   ...
   

如果您希望将服务提供的其他值用于其他用途，这也很有用。这些可以通过自动完成功能的任何事件以ui.item.[yourProperty]. 因此，如果我select对Autocomplete小部件的事件进行回调，则可以通过ui.item.description.