Question

我有一个使用jquery ui自动完成插件的网络应用。

JS：

<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 members”，就像demo使用“var projects”一样。有人可以帮助正确的语法吗？

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>

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

1 个答案: