jQuery的自动完成JSON

Question

jQuery UI的自动完成不与我的JSON文件的工作。我想显示的名称键的值。你能帮助我吗？

cluster.json：

 [
    {
    "name": "A128",
    "ra": "24.97",
    "dec":"12.210"
  },
  {
    "name": "AB 1317",
    "ra": "22.55",
    "dec": "37.124"
  },
  {
    "name": "UBA 133",
    "ra": "35.6",
    "dec": "16.44"
  },
  {
    "name": "UGC 69",
    "ra": "35.6",
    "dec": "16.44"
  }

和jQuery的HTML：

$('#name').autocomplete({
    source : function(request, response) {
        $.ajax({
            url :'cluster.json', 
            dataType : 'json',
            data : request,              
                success: function(data) { 
                    response($.map(data, function(item) {
                    return  item.name;
                    }));
                 }
            });     
    }
});

当我输入一个字符出现在控制台此错误消息：XML解析错误：语法错误地点：文件：/// C：/Users/xxxx/xxxxx/json/cluster.json项=多少？线1，列3：

谢谢您的帮助。

Answer 1

考虑以下：

var myData = [];
$.getJSON("cluster.json", function(data){
  myData = $.map(data, function(v, k){
    return v.name;
  });
});
$('#name').autocomplete({
  source: myData
});

如果你要过滤自己的结果，你可以做，在许多方面。

这将筛选基于输入的结果。最后的代码将如下所示：

var myData = [];
$.getJSON("cluster.json", function(data){
  myData = $.map(data, function(v, k){
    return v.name;
  });
});
$('#name').autocomplete({
  source : function(request, response) {
    response($.ui.autocomplete.filter(myData, request.term));
});

这两个例子中，我首先收集的所有数据，我认为这将是在JSON文件中的静态数据。如果你愿意，你可以得到源功能的数据。

完整的例子

var jData = [{
    "name": "A128",
    "ra": "24.97",
    "dec": "12.210"
  },
  {
    "name": "AB 1317",
    "ra": "22.55",
    "dec": "37.124"
  },
  {
    "name": "UBA 133",
    "ra": "35.6",
    "dec": "16.44"
  },
  {
    "name": "UGC 69",
    "ra": "35.6",
    "dec": "16.44"
  }
];
$(function() {
  var myData = $.map(jData, function(v, i) {
    return v.name;
  });
  $('#name').autocomplete({
    source: myData
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="name">Name: </label>
  <input id="name">
</div>

希望帮助。