title: Autocomplete HTML form from JSON
body: <p>Allright so I have this form :</p>
  
  <p><a href="https://i.stack.imgur.com/QJ4TX.png" rel="nofollow">Form</a></p>
  
  <p>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:</p>
  
  <pre><code>[{
  "label": "Andre Nadeau",
  "Num": "104J",
  "email": "Andre.Nadeau@example.com"
  }, {
  "label": "Andre Potvin",
  "Num": "130J",
  "email": "Andre.Potvin@example.com"
  }],
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>PHP :</strong></p>
  
  <pre><code>$query = $db-&gt;query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
  while ($row = $query-&gt;fetch_assoc()) {
      $data[] = array(
          'label' =&gt; $row['Prenom'] . ' ' . $row['Nom'],
          'Num' =&gt; $row['Num'],
          'email' =&gt; $row['Email']
      );}
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script&gt;
          $(function() {
              $( "#Nom" ).autocomplete({
                  source: 'Search.php',
              })
          })
  &lt;/script&gt;
  
  
  &lt;div class="form-group"&gt;
      &lt;label for="Name"&gt;Nom: &lt;/label&gt;
         &lt;input type="text" id="Nom" class="form-control" name="Nom" required&gt;
      &lt;label for="Num"&gt;ID: &lt;/label&gt;
         &lt;input type="text" id="Num" class="form-control" name="Num"&gt;
      &lt;label for="Email"&gt;Email: &lt;/label&gt;
         &lt;input type="text" id="Email" class="form-control" name="Email"&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I'm trying to work with Feeda answer, everything make a lot of sense but I'm having difficulties to make it work.</p>
  
  <p>I changed my PHP to :</p>
  
  <pre><code>    $searchTerm = $_GET['term'];
  
  //get matched data from table
  $query = $db-&gt;query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
  while ($row = $query-&gt;fetch_assoc()) {
      switch($option)   {
          case 'nom':
              $data[] = $row['Prenom'] . ' ' . $row['Nom'];
          case 'email':
              $data[] = $row['Email'];
      }
  </code></pre>
  
  <p>And the Javascript to :</p>
  
  <pre><code>        &lt;script&gt;
          $(function() {
              $( "#Nom" ).autocomplete({ source: 'Search.php?option=name', }) 
              $( "#email" ).autocomplete({ source: 'Search.php?option=email', })  
          })
      &lt;/script&gt;
  </code></pre>
  
  <p>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".</p>
  
  <p>And of course my autocomplete is not working yet :(</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>At this point i'm not sure if it would be better if I create a new question but i'm almost there !</p>
  
  <p>I'm able to get the data I need with all the help I got here( Thanks everyone &lt;3) </p>
  
  <p>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... </p>
  
  <p>So here is where I'm at for the code :</p>
  
  <p><strong>HTML</strong> 
              
              $(function() {
                  $( "#Nom" ).autocomplete({ source: 'Search.php?option=nom', }) 
                  $( "#email" ).autocomplete({ source: 'Search.php?option=email', })<br>
              })
          </p>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>   //get search term
  $option = $_GET['option'];
  $searchTerm = $_GET['term'];
  
  //get matched data from table
  $query = $db-&gt;query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
  while ($row = $query-&gt;fetch_assoc()) {
      switch($option)   {
          case 'nom':
              $data[] = $row['Prenom'] . ' ' . $row['Nom'];
          case 'email':
              $data[] = $row['Email'];
      }
  }
  
  //return json data
  echo json_encode($data);
  </code></pre>
  
  <p>I think I should use Ajax for that last part bot as you probably already guessed this is not one of my skills.</p>
  
  <p><strong>MORE UPDATE</strong></p>
  
  <p>Following gschambial advice :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script&gt;
  $(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);
                }
            });     
    });        
  </code></pre>
  
  <p></p>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>    $searchTerm = $_GET['term'];
  
  //get matched data from table
  $query = $db-&gt;query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
  while ($row = $query-&gt;fetch_assoc()) {
      switch($option)   {
          case 'nom':
              $data[] = $row['Prenom'] . ' ' . $row['Nom'];
          case 'email':
              $data[] = $row['Email'];
      }
  }
  
  //return json data
  echo json_encode($data);
  </code></pre>
  
  <p>Still no luck !</p>