将 JSON 分配给自动完成答案

【问题标题】：Assign JSON to autocomplete将 JSON 分配给自动完成
【发布时间】：2013-11-19 09:33:11
【问题描述】：

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

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

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

我已经四处寻找这个并问了其他问题。我已经为此工作了 DAYS 天，我很接近所以请帮忙....

这是我的标记/脚本

<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 autocomplete with JSON

【问题讨论】：

你试过这个例子中的代码jqueryui.com/autocomplete/#remote-jsonp。 response 是你的根元素

标签： javascript jquery json autocomplete jquery-ui-autocomplete

【解决方案1】：

这是我的实现，效果很好……

  $("#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 () {
        }
    }
});

【讨论】：

我实现了你的代码，但我现在看不到在代码隐藏中调用任务。我放了一些警报，看看它是否被调用，但不是。我想在页面加载时调用它，以便我可以在后台获取数据并将其加载到输入控件
好的，现在我看到了一些东西！我把你的代码放在 $(document).ready(function() {});现在我看到自动完成中出现了一些东西......

【解决方案2】：

这应该可行：

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

当source option is a string:

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

【讨论】：