将JSON分配给自动完成

Assign JSON to autocomplete

本文关键字：JSON 分配      更新时间：2023-09-26

我有从我的服务返回的实际JSON对象的以下字符串表示：

[
  {
    "label": "#1 Pizza [99999]",
    "value": "99999"
  },
  {
    "label": "001 Test Facility [99998]",
    "value": "99998"
  }
]

我正在尝试将其放入jQuery自动完成中。但我不清楚为什么我没有看到该控件中的数据。

我已经到处找过了，还问过其他问题。我已经为此工作了好几天了，我离得很近，所以请帮忙。。。。

这是我的标记/脚本

<script type="text/javascript">
function processFacilities(data) {
    response($.map(data, function (value, key) {
        alert(data);
        return {
            label: value,
            value: key
        };
    }));
};
$('#tags').autocomplete({
    source: function (request, response) {
        $.getJSON('FacilitiesAsync', 'sourceDb=myDb', processFacilities);
    },
    minLength: 2,
    delay: 100
});
</script>

我的类正在返回标签和值，正如我从下面的帖子中看到的那样。这里的不同之处在于，我的JSON数据前面没有用于识别它的东西，例如：["facilities"：{etc..}]

jQuery UI使用JSON 自动完成

这是我的实现，它工作得很好。。。

  $("#autocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/api/controller/",
                type: 'GET',
                cache: false,
                data: request,
                dataType: 'json',
                success: function (json) {
                    // call autocomplete callback method with results 
                    response($.map(json, function (name) {
                        return {
                            label: name.Name,
                            value: name.ID
                        };
                    }));
                },
                error: function (xmlHttpRequest, textStatus, errorThrown) {
                    $("#autocomplete").text(textStatus + ', ' + errorThrown);
                }
            });
        },
        select: function (event, ui) {
            $('#autocomplete').val(ui.item.label);
            $('#selectedLocationId').val(ui.item.value);
            return false;
        },
        messages: {
            noResults: '',
            results: function () {
            }
        }
    });

要将其翻译为您的版本。。。

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "FacilitiesAsync/",
            type: 'GET',
            cache: false,
            data: request,
            dataType: 'json',
            success: function (json) {
                // call autocomplete callback method with results 
                response($.map(json, function (name) {
                    return {
                        label: name.Name,
                        value: name.ID
                    };
                }));
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                $("#autocomplete").text(textStatus + ', ' + errorThrown);
            }
        });
    },
    select: function (event, ui) {
        $('#autocomplete').val(ui.item.label);
        return false;
    },
    messages: {
        noResults: '',
        results: function () {
        }
    }
});

这应该有效：

$('#tags').autocomplete({
    source: "/path/to/script",
    minLength: 2,
    delay: 100
});

当源选项为字符串时：

字符串：当使用字符串时，自动完成插件希望字符串，指向将返回JSON数据的URL资源。它可以位于同一主机或不同主机上（必须提供JSONP）。这个自动完成插件不过滤结果，而是一个查询字符串添加了一个术语字段，服务器端脚本应该用于筛选结果。例如，如果源选项为设置为http://example.com，用户键入foo，一个GET请求将被制成CCD_ 2。数据本身可以是以与上述本地数据相同的格式。

相关文章：