автозаполнения HTML форма из JSON

Question

Allright поэтому я иметь такую ​​форму:

Form

Когда имя вводится в первый вход, мне нужно заполнить «ID» и «Электронная почта» с данными из SQL. Входное имя автозаполнения с JSON, вот пример JSON:

[{ 
"label": "Andre Nadeau", 
"Num": "104J", 
"email": "Andre.Nadeau@example.com" 
}, { 
"label": "Andre Potvin", 
"Num": "130J", 
"email": "Andre.Potvin@example.com" 
}], 

Я могу автозаполнение поля Имя, но я не понимаю, как отправить данные для ID и адрес электронной почты в другие поля.

PHP:

$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC"); 
while ($row = $query->fetch_assoc()) { 
    $data[] = array(
     'label' => $row['Prenom'] . ' ' . $row['Nom'], 
     'Num' => $row['Num'], 
     'email' => $row['Email'] 
    );} 

HTML:

<script> 
     $(function() { 
      $("#Nom").autocomplete({ 
       source: 'Search.php', 
      }) 
     }) 
</script> 


<div class="form-group"> 
    <label for="Name">Nom: </label> 
     <input type="text" id="Nom" class="form-control" name="Nom" required> 
    <label for="Num">ID: </label> 
     <input type="text" id="Num" class="form-control" name="Num"> 
    <label for="Email">Email: </label> 
     <input type="text" id="Email" class="form-control" name="Email"> 

EDIT:

Я пытаюсь работать с Feeda ответ, все делают много смысла, но я У меня есть трудности, чтобы заставить его работать.

Я изменил свой РНР:

$searchTerm = $_GET['term']; 

//get matched data from table 
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC"); 
while ($row = $query->fetch_assoc()) { 
    switch($option) { 
     case 'nom': 
      $data[] = $row['Prenom'] . ' ' . $row['Nom']; 
     case 'email': 
      $data[] = $row['Email']; 
    } 

И Javascript для:

 <script> 
     $(function() { 
      $("#Nom").autocomplete({ source: 'Search.php?option=name', }) 
      $("#email").autocomplete({ source: 'Search.php?option=email', }) 
     }) 
    </script> 

Если я правильно понимаю, что я должен быть в состоянии использовать /Search.php?option=nom и увидеть некоторые данные, но когда я пытаюсь в браузере, введите мою пустую страницу с нулевым значением.

И, конечно, мое автозаполнение пока не работает :(

UPDATE

На данный момент я не уверен, если это было бы лучше, если я создаю новый вопрос, но я почти там!

Я могу получить данные мне нужно со всей помощи я получил здесь (Спасибо всем < 3)

Моя проблема сейчас в том, что я могу найти пользователя с помощью поля «Имя» я n моя форма, но как только я выбрал пользователя, мне нужно, чтобы поле электронной почты было заполнено автоматически, используя электронную почту, связанную с пользователем в моей базе данных ...

Итак, вот я здесь за кодом:

HTML $ (функция() { $ ("#Nom") .autocomplete ({источник: '? search.php вариант = Nom'}) $ ("#email") .autocomplete ({source: 'Search.php?Опция = электронная почта»,})
})

PHP

//get search term 
$option = $_GET['option']; 
$searchTerm = $_GET['term']; 

//get matched data from table 
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC"); 
while ($row = $query->fetch_assoc()) { 
    switch($option) { 
     case 'nom': 
      $data[] = $row['Prenom'] . ' ' . $row['Nom']; 
     case 'email': 
      $data[] = $row['Email']; 
    } 
} 

//return json data 
echo json_encode($data); 

Я думаю, что я должен использовать Ajax для этой последней части бота, как вы, наверное, уже догадались, что это не один из моих навыков.

MORE UPDATE

После gschambial совет:

HTML

<script> 
$(function(){ 
$('#Nom').autocomplete({ 
       minLength: 0, 
       source: function (request, response) { 
        $.ajax({ 
         type: "GET", 
         url: 'Search.php', 
         dataType: "json", 
         data: {term : request.term}, 
         dataType: "json", 
         success: function (data) { 
          $.each(data,function(key, item){ 
          return { 
           label : item.NumColumnName, 
           value : item.EmailColumnName 
          }; 
          }); 
         }, 
         error: function (result) { 
          alert("Error"); 
         } 
        }); 
       }, 
       select: function (event, ui) { 
          var Num = $("#Num"); 
          var Email = $("#Email"); 
          Num.val(ui.item.label); 
          Email.val(ui.item.value); 
       } 
      });  
    });   

PHP

$searchTerm = $_GET['term']; 

//get matched data from table 
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC"); 
while ($row = $query->fetch_assoc()) { 
    switch($option) { 
     case 'nom': 
      $data[] = $row['Prenom'] . ' ' . $row['Nom']; 
     case 'email': 
      $data[] = $row['Email']; 
    } 
} 

//return json data 
echo json_encode($data); 

Все еще не повезло!

Answer 1

Autocomplete принимает массив, поэтому делает отдельные массивы данных и получает его через ajax. а затем назначить источник соответственно для каждого.

while ($row = $query->fetch_assoc()) { 
    $data['names'][] = $row['Prenom'] . ' ' . $row['Nom']; 
    $data['ids'][] = $row['Num']; 
    $data['emails'][] = $row['email']; 

}

в JavaScript:

source : data.names; 

ELSE:

вместо источника: search.php попробовать. Search.php? Option = name

На PHP.

switch($option) { 
case 'name': 
    $data[] = $row['Prenom'] . ' ' . $row['Nom']; 
case 'email': 
    $data[] = $row['email']; 
.. 
} 

Answer 2

Я думаю, что вам нужно что-то вроде этого:

$(function(){ 
$('#Nom').autocomplete({ 
       minLength: 0, 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         url: 'Search.php', 
         dataType: "json", 
         data: {term : request.term}, 

         success: function (data) { 
          $.each(data,function(key, item){ 
          return { 
           label : item.nom, 
           value : item.email 
          }; 
          }); 
         }, 
         error: function (result) { 
          alert("Error"); 
         } 
        }); 
       }, 
       select: function (event, ui) { 
          var Num = $("#Num"); 
          var Email = $("#Email"); 
          Num.val(ui.item.label); 
          Email.val(ui.item.value); 
       } 
      });  
    });   

PHP код:

$post_data= json_decode(file_get_contents('php://input'), true); 
print_r($post_data); 
$searchTerm = $post_data["term"]; 
    $data= array(); 

    //get matched data from table 
    $query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC"); 
    while ($row = $query->fetch_assoc()) { 

       $data["nom"] = $row['Prenom'] . ' ' . $row['Nom']; 
       $data["email"] = $row['Email']; 

    } 
    //return json data 
    echo json_encode($data); 

Попробуйте это! Надеюсь, он решит вашу цель.