时间戳

首页 > 解决方案 > jquery ui 自动完成自定义数据语法

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

问题描述

我有一个使用 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”，如演示使用“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
}

]

标签： jqueryjquery-ui-autocomplete

解决方案

将 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>

推荐阅读