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"
  }

和HTML中的Jquery：

$('#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：语法错误放置：file：/// C：/Users/xxxx/xxxxx/json/cluster.json？term = A Numérode ligne 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>

希望有帮助。

jQuery自动完成JSON

1 个答案: