用于jQuery UI自动完成的JSON数组

时间:2014-12-21 21:25:20

标签: javascript jquery json autocomplete

任务是获取包含城市名称数组的本地JSON文件并将其置于自动完成状态。没有关于JSON数组的确切信息,总是谈论对'关键'值'。所以我有一个问题:是否可以在JSON中使用包含单个项目的数组,如果它是我的代码的错误在哪里?
JSON

    [
    "Minsk",
    "London",
    "Riga",
    "Vilnius",
    "Warszaw",
    "Paris",
    "Moscow",
    "Tallin",
    "Berlin",
    "Amsterdam",
    "Oslo",
    "Helsinki"
]  

JS

$('#tags').autocomplete({
    source: function(request, response) {
        var result = $.ajax({
            url: '../source.json',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                var array = [];
                response($.each( data, function(item) {
                    array.push(item);
                    return array;
                }));
                return array;
            }
        });
    }
});  

1 个答案:

答案 0 :(得分:2)

JSON确实支持数组和对象。

您的代码不会将结果返回给源代码。事实上,你不能等待$ .ajax()完成,而不使用setInterval来检查它。最好的方法是在页面加载时访问JSON文件并从那里引用源。

尝试:

var dict = [];

$.ajax({
  url: 'https://dl.dropboxusercontent.com/u/100496307/source.json',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    $.each(data, function() {
      dict.push(this.toString());
    });
    return dict;
  }
});

$('#tags').autocomplete({
  source: dict
});

$('#tags').keydown(function() {
  console.log(dict);
});
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" />
</head>

<body>
  <input type="text" id="tags" />
</body>