It seems to me from what you see in the example of the link that you put, that you are using the autocomplete of Jquery. So I found the following link with an example that fits with your request:
Example of Jquery Autocomplete
To make it work you need two parts, the example that you put tells you how to get the data from the MySQL database, so instead of the object that brings the example of the JQuery site, the Javascript variable projects
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
This should be deleted and replaced by what you bring from the database.
So you would have to change the sample code that you put, so that when the JSON Encode is done, bring inside the objects with all the info you want, I'll give you an example of how it could be:
//get matched data from skills table
$query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
$i = 0;
while ($row = $query->fetch_assoc()) {
$data[$i]['id'] = $row['id'];
$data[$i]['image'] = $row['image'];
$data[$i]['name'] = $row['name'];
$data[$i]['value'] = $row['value'];
$i++;
}
//return json data
echo json_encode($data);
When doing the json_encode you will see that it already takes a form more similar to the javascript array projects of the example the JQuery page that I put you.
Editing: To make the data of the selection pass to another page of PHP you can do several things, in the example of the link that I previously put:
select: function( event, ui ) {
$( "#project" ).val( ui.item.label ); //Como puedes ver en el objeto ui.item vienen los valores que vienen del JSON que mando el php que se creo anteriormente. En este caso #project podría ser el objeto hidden
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
In this case, as mentioned in the following article from Stack Overflow in English , you can make a single element type <input type ="hidden"> on which using JSON.stringify becomes another JSON object that you can easily manipulate when sending to your PHP target page.
The entire script should look something like this:
<script>
$( function() {
$( "#project" ).autocomplete({
minLength: 0,
source: paginaFuente.php,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
//GENERAR UN SOLO ARRAY, CON LOS VALORES QUE VIENEN DE LA BASE DE DATOS
var elems = [];
elems.push(ui.item.label);
elems.push(ui.item.value);
elems.push(ui.item.picsrc);
//GUARDAR EN CAMPO HIDDEN TODO; HECHO JSON usando JSON.stringify
$('#input_hidden_field').val(JSON.stringify(elems)); //store array
var value = $('#input_hidden_field').val(); //retrieve array
value = JSON.parse(value);
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
.appendTo( ul );
};
} );
</script>
//LUEGO EN ALGUNA PARTE DEL BODY
<form id="test" action="otherPhpPage.php">
<input type="hidden" id="input_hidden_field" value="" />
</form>
I hope this answers your question.