Question

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

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

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

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

当您点击其中任何一个时，警报提醒（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 和描述，自动填充将查找标签和 value 属性。如果您只定义标签 OR 值属性，则会将该属性用于标签和值显示。

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

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

可能的解决方案

让这项工作的第一种方法是调整您的服务以添加返回给客户端的json的标签和 value 属性。

第二种方式，如果你无法控制服务，那就是而是在成功事件函数中进行AJAX调用可以手动映射结果并使用new扩展对象属性。

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

如果您希望将服务提供的其他值用于其他内容，这也很有用。这些可以通过{em>自动完成功能的任何事件以ui.item.[yourProperty]的形式访问。因此，如果我回复自动填充小部件的select事件，我可以通过ui.item.description访问说明。

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

1 个答案:

为什么......也许

可能的解决方案