Autocomplete HTML form from JSON

Question

Allright so I have this form :

Form

When the name is entered in the first input , I need to populate the "ID" and "Email" with data from a SQL table. The name input is autocomplete with JSON, here is an example of the JSON:

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

I'm able to autocomplete the Name field but I don't understand how to send the data for the ID and email in the other fields.

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:

I'm trying to work with Feeda answer, everything make a lot of sense but I'm having difficulties to make it work.

I changed my PHP to :

    $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'];
    }

And the Javascript to :

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

If I understand correctly I should be able to use /Search.php?option=nom and see some data but when I try in browser in give my a blank page with "null".

And of course my autocomplete is not working yet :(

UPDATE

At this point i'm not sure if it would be better if I create a new question but i'm almost there !

I'm able to get the data I need with all the help I got here( Thanks everyone <3)

My problem now is that I can find a user using the "Name" field in my form, but once I selected the user I need the email field to be completed automatically using the email linked to the user in my database...

So here is where I'm at for the code :

HTML $(function() { $( "#Nom" ).autocomplete({ source: 'Search.php?option=nom', }) $( "#email" ).autocomplete({ source: 'Search.php?option=email', })
})

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);

I think I should use Ajax for that last part bot as you probably already guessed this is not one of my skills.

MORE UPDATE

Following gschambial advice :

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);

Still no luck !

Answer 1

Autocomplete takes an array so makes separate arrays of these and get it through ajax. and then assign source accordingly for each.

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

}

in JavaScript:

source : data.names;

ELSE:

instead of source: Search.php try. Search.php?option=name

On PHP.

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

Answer 2

I think, you need something like this:

$(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 CODE:

$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);

Try this out! I hope, It will solve your purpose.