JQuery Автозаполнение JSON

Question

Автозаполнение пользовательского интерфейса Jquery не работает с моим файлом 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;
                    }));
                 }
            });     
    }
});

При вводе символа появляется это сообщение об ошибке вконсоль: Erreur d'analyse XML: erreur de syntaxe Объяснение: файл: /// C: /Users/xxxx/xxxxx/json/cluster.json? term = A 1, Colonne 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>

Надеюсь, это поможет.