Allright so I have this 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 !
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'];
..
}
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.