jquery自动完成自定义数据语法

Question

我有一个web应用程序，它使用jquery自动完成插件。

联署材料：

<script>
$(function() {$( ".autocomplete-2" ).autocomplete({delay: 0, source: window.players, minLength: 2, autoFocus: true});});
</script>

我使用一个基本数组为jQ ui插件提供名称：

var players = 
[
"Addabbo, Eric", 
"Addison, Jackson",
"Callea, Thomas"
]

但是，我已经将这些数据保存在另一个更大的文件中:正如在http://jqueryui.com/autocomplete/#custom-data上记录的那样，但是我不知道如何像演示使用"var项目“那样使用"var成员”。谁能帮我找个正确的语法吗？

var members = [
{
"Name": "Adeyemon, Murie",
"Rating": 1000,
"USCF_Exp": "2009-10-10",
"ID": 16720664
},
{
"Name": "Ahmed, Jamshed",
"Rating": 1735,
"USCF_Exp": "2019-10-10",
"ID": 12537964
},
{
"Name": "Attaya, James",
"Rating": 1535,
"USCF_Exp": "2018-10-10",
"ID": 12210580
}

]

Answer 1

将jQuery添加到网页中：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

你的剧本：

 <script>
  $( function() {
    var members = [
{
"Name": "Adeyemon, Murie",
"Rating": 1000,
"USCF_Exp": "2009-10-10",
"ID": 16720664
},
{
"Name": "Ahmed, Jamshed",
"Rating": 1735,
"USCF_Exp": "2019-10-10",
"ID": 12537964
},
{
"Name": "Attaya, James",
"Rating": 1535,
"USCF_Exp": "2018-10-10",
"ID": 12210580
}

];

    $( "#member" ).autocomplete({
      minLength: 0,
      source: members ,
      focus: function( event, ui ) {
        $( "#member" ).val( ui.item.Name);
        return false;
      },
      select: function( event, ui ) {
        $( "#member" ).val( ui.item.Name);
        $( "#member-Rating" ).val( ui.item.Rating);
        $( "#member-USCF_Exp" ).html( ui.item.USCF_Exp);
        $( "#member-id" ).html( ui.item.ID);


        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.Name+ "<br>" + item.Rating+ "</div>" )
        .appendTo( ul );
    };
  } );
  </script>

代码html：

<input id="member">
<input type="hidden" id="member-id">
<p id="member-USCF_Exp"></p>