Поле автозаполнения с данными JSON из внешнего URL (Steam API) - PullRequest
Новая
       51

Поле автозаполнения с данными JSON из внешнего URL (Steam API)

0 голосов
/ 03 апреля 2020

Я работаю над полем ввода, которое автоматически заполняется именами по этой ссылке (steam API):

http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json

или

http://api.steampowered.com/ISteamApps/GetAppList/v0001

Я бы также хотел, чтобы поле возвращало идентификатор игры, несмотря на то, что в нее вставлено имя.

Пока что после просмотра форумов я собрал это, но это не совсем работает: 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $("#tags").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json",
                data: { query: request.term },
                success: function (data) {
                    var transformed = $.map(data, function (el) {
                        return {
                            label: el.appid + " - " + el.name,
                            id: el.appid
                        };
                    });
                    response(transformed);
                },
                error: function () {
                    response([]);
                }
            });
          }
      });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Для автозаполнения я выбрал функцию jQuery автозаполнение: https://jqueryui.com/autocomplete/ однако я открыт для других методов.

Редактировать: Исправлена ​​синтаксическая ошибка в строке 31, но код все еще не работает.

JSFiddle: https://jsfiddle.net/vxej2L5g/

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

В строке Javascript в строке 31 имеется синтаксическая ошибка (в основном у вас есть лишние закрывающая скобка и точка с запятой).

Ответ JSON для вызываемого вами API оборачивает список приложений .

0 голосов
/ 03 апреля 2020

В блоке успеха вы назначаете метку и идентификатор. В ярлыке вы назначили имя, а в id - приложение. Мы можем изменить это для форматирования метки следующим образом: 

success: function (data) {
   var transformed = $.map(data, function (el) {
      return {
         label: el.appid + " - " + el.name,
         id: el.appid
      };
   });
   response(transformed);
},
...