JQuery UI Автозаполнение пользовательского синтаксиса данных - PullRequest
Новая
       12

JQuery UI Автозаполнение пользовательского синтаксиса данных

0 голосов
/ 25 мая 2018

У меня есть веб-приложение, использующее плагин автозаполнения 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", как в демонстрационной версии "вар проекты ".Может ли кто-нибудь помочь с правильным синтаксисом? 

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
}

]

1 Ответ

0 голосов
/ 25 мая 2018

Добавление 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>
...