Автозаполнение Jquery не работает с классом - PullRequest
0 голосов
/ 30 августа 2018

Я использую автозаполнение из Jquery, и я использую его без проблем, когда обработчик является идентификатором. Однако теперь мне нужна та же переменная источника для автозаполнения большого количества входных данных. Моя идея состояла в том, чтобы заменить идентификатор классом, но он не работает (без ошибок). Jquery выглядит примерно так:

<script>
$( function() {var all_users = [
        {
        id: "2",
        label: "Claudio"
        },
        {
        id: "3",
        label: "Tom"
        },
        {
        id: "4",
        label: "Brandon"
        },
        {
        id: "5",
        label: "Edgar"
        },
      {
        id: "0",
        label: "0"
      }
    ];

$( ".invitee" ).autocomplete({
  minLength: 0,
  source: all_users,
  focus: function( event, ui ) {
    $( ".invitee" ).val( ui.item.label );
    return false;
  },

  select: function( event, ui ) {
    $( "#invitee_name" ).val( ui.item.label );
    $( "#user_id" ).val( ui.item.id );
    return false;
     }
    })
  } );
  </script>

И HTML:

<label>Who was your best friend in Kindergarden</label> 
<input type="text" class="form-control" class="invitee" id="1">

<label>Who was your best friend in High School</label> 
<input type="text" class="form-control" class="invitee" id="2">

<label>Who was your best friend in jail</label> 
<input type="text" class="form-control" class="invitee" id="3">

<input type="text" class="form-control" id="invitee_name">
<input type="text" class="form-control" id="user_id">

Если я изменю один из входов на id = "пригласить" и исправлю обработчики, он будет работать хорошо, но только для одного входа. Как я могу подойти к этому вопросу без необходимости неустанно дублировать '$ (".invitee") .autocomplete "?

Для целей тестирования: avhub.teameivi.com/test_autocomplete.php

1 Ответ

0 голосов
/ 30 августа 2018

Вы присваиваете имена классов элементам <input> неправильно. Должно быть

<input type="text" class="form-control invitee" id="1">
...