Question

我正在尝试构建一个允许用户使用Giantbomb API搜索游戏的小型Web应用程序，在列表中选择名称，然后该游戏进入可排序的前10个列表以后。

在与jQuery UI Autocomplete进行大量摔跤之后，我设法让它显示游戏的名称，但我想将该游戏的完整检索数据存储在某个地方以添加到列表中。 / p>

到目前为止我所拥有的内容（大多数来自我在其他地方找到的片段）：

$(document).ready(function() {
src = 'http://www.giantbomb.com/api/search/?api_key=myapikey&format=json';

$("#gameSearch").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                query : request.term,
                resources: "game",
                field_list: "name,original_release_date,image,platforms,publishers,developers"
            },
            success: function(data) {
              response($.map(data.results, function(item) {
                return { 
                    label: item.name,
                    value: item.name
                }
            }));
            }         
        });
    },
});
});

这会在输入搜索框时为我提供与搜索字词匹配的游戏列表，但我想以某种方式使用jQuery UI自动完成功能select功能来推送完整数据从field_list到要显示的某种数组，无论我在select函数的哪个位置，我都努力让它工作。

Answer 1

您可以将自动完成选项中的游戏ID存储在另一个输入中，当该输入发生变化时，拨打电话获取所选游戏的游戏数据。由于ajax的限制，我无法在小提琴中真正测试下面的内容，但希望你能得到主旨。

HTML

<input id="gameSearch" />
<input id="gameId" />
<table id="results">
    <thead></thead>
    <tbody></tbody>
</table>

JS

$(document).ready(function () {
    var fields = "name,original_release_date,image,platforms,publishers,developers";
    var fieldsArray = fields.split(',');
    var $table = $('#results');
    $table.find('thead').append('<tr></tr>');
    for (var i = 0; i < fieldsArray.length; i++) {
        $table.find('thead tr').append('<th>' + fieldsArray[i] + '</th>');
    }

    var results = data.results[0];

    $('#gameId').change(function () {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                query: {
                    id: $('#gameId').val()
                },
                resources: "game",
                field_list: fields
            },
            success: function (data) {
                var results = data.results[0];
                var $tr = $('<tr></tr>');
                for (var j = 0; j < fieldsArray.length; j++) {
                    $tr.append('<td>' + results[fieldsArray[j]] + '</td>');
                }
                $('#results tbody').empty().append($tr);
            }
        });

    });

    $("#gameSearch").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    query: request.term,
                    resources: "game",
                    field_list: fields
                },
                success: function (data) {
                    response($.map(data.results, function (item) {
                        return {
                            label: item.name,
                            value: item.id
                        }
                    }));
                }
            });
        },
        select: function (event, ui) {
            $('#gameId').val(ui.item.value);
        }
    });
});

如何从jQuery自动完成列表中存储选定的结果？

1 个答案: