jquery autocompletion json - json

Question

Jquery UI autocompletion does not work with my JSON file. I want to display the values of the name key. Can you help me?
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"
}
and Jquery in 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;
}));
}
});
}
});
When I enter a character there is this error message in the console:
Erreur d’analyse XML : erreur de syntaxe
Emplacement : file:///C:/Users/xxxx/xxxxx/json/cluster.json?term=A
Numéro de ligne 1, Colonne 3 :
Thank you for your help.

Answer 1

Consider the following:
var myData = [];
$.getJSON("cluster.json", function(data){
myData = $.map(data, function(v, k){
return v.name;
});
});
$('#name').autocomplete({
source: myData
});
If you want to filter the results on your own, you can do that in a number of ways.
This will filter the results based on the input. The final code would look like:
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));
});
Both of these examples, I gather all the data first as I assume it's going to be the static data in the JSON file. You could get the data in the source function if you want.
Full Example
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>
Hope that helps.