Javascript Jquery UI自动完成：标签和值的行为都类似于值

我正在使用jQueryUI的自动完成

我遇到的问题是：当我与外部数据源一起工作时，标签和值的行为都类似于值

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

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

当您单击其中任何一个时，警报（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" />

$（文档）.ready（函数（）{
$（“#输入框”）.autocomplete({
资料来源：“sd/aa.php”，
最小长度：3，
选择：功能（事件、用户界面）{
警报（ui.item.label）；
警报（ui.item.value）；
}
});
});

为什么……也许 当使用jQuery Autocomplete时，它希望在使用复杂对象时标签和值具有特定的属性

例如，一个具有自定义属性的对象，我们称之为Id和Description，Autocomplete将查找标签和值属性。如果仅定义标签或值属性，则该属性将同时用于显示的标签和值

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

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

---

可能的解决方案

第一种方法是调整您的服务以添加 返回给客户端的json的标签和值属性

第二种方法，如果你不能控制服务，那就是 改为进行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);
        }
    });
}
...

如果您希望将服务提供的其他值用于其他内容，这也很有用。可以通过自动完成函数的任何事件以

ui.item.[yourProperty]

的形式访问这些属性。因此，如果我对自动完成小部件的

select

事件进行回调，我可以通过

ui.item.description

为什么……来访问描述 当使用jQuery Autocomplete时，它希望在使用复杂对象时标签和值具有特定的属性

例如，一个具有自定义属性的对象，我们称之为Id和Description，Autocomplete将查找标签和值属性。如果仅定义标签或值属性，则该属性将同时用于显示的标签和值

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

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

---

可能的解决方案

第一种方法是调整您的服务以添加 返回给客户端的json的标签和值属性

第二种方法，如果你不能控制服务，那就是 改为进行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);
        }
    });
}
...

---

如果您希望将服务提供的其他值用于其他内容，这也很有用。可以通过自动完成函数的任何事件以

ui.item.[yourProperty]

的形式访问这些属性。因此，如果我回调自动完成小部件的

select

事件，我可以通过

ui.item.description

返回的格式是什么？jQuery Autocomplete需要一种特定的格式来显示标签和值。从外部返回时，

ui

的结构是什么？我有一种感觉，你得到了不同的结构。添加控制台日志（ui）；在发出警报之前。返回的格式是什么？jQuery Autocomplete需要一种特定的格式来显示标签和值。从外部返回时，

ui

的结构是什么？我有一种感觉，你得到了不同的结构。添加控制台日志（ui）；在您发出警报之前。谢谢。由于php数组问题，我的json格式不正确。它没有开头和结尾的那个[和]。谢谢。由于php数组问题，我的json格式不正确。它的开头和结尾都没有[和]。