<input type=text id='t1' >
Once user enters characters in side this box it tries to collect the options from autocomplete-source.php file by using JQuery.
$( "#t1" ).autocomplete({
source: function (request, response) {
$.ajax({
url: "backend-source.php",
type: "POST",
data: request,
dataType: 'json',
success: function (data) {
response($.map(data, function (el) {
return {
label: el.label,
value: el.value
};
}));
}
});
},
});
The file backend-source.php first receives the user entered text .
$t1=$_POST['term'];
Here we have used type:POST to send data by post method. A request object with a single term property carries the data to backend script. If we are not specifying type then by default GET type is used. In such a case a GET request will be made like this
backend-source.php?term=foo
Here term equals to the data the user enters inside the box.
response($.map(data, function (el) {
return {
label: el.label,
value: el.value
};
}));
select:function (e, ui) {
e.preventDefault();
$("#t1").val(ui.item.label);
}
SELECT name AS label,id AS value FROM student WHERE NAME LIKE '%Alex%' or NAME LIKE '%Ro%'
We are using PHP string functions to break the string and creat Query with multiple OR combination.
$kt=explode(" ",$t1);//Breaking the string to array of words
// Now let us generate the sql
while(list($key,$val)=each($kt)){
if($val<>" " and strlen($val) > 0){$q .= " NAME LIKE '%$val%' OR ";}
}// end of while
$q=substr($q,0,(strlen($q)-3)); // remove the last OR from the output
Use of multiple keyword for matching record using LIKE query is explained here
$row=$dbo->prepare($q1);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);
Note that we have kept our database login details inside config.php file and same file is included at the starting of the page. echo json_encode($result); // Output JSON formatted data
$result_set = $connection->query($q1);
$data=array();
while($row = mysqli_fetch_array($result_set,MYSQLI_ASSOC)){
$data[]=$row;
}
echo json_encode($data);
Read more on MySQLi connection and database management
Once the options are displayed , user can select one of the available options from the list. On selection of option user can trigger the load method by JQueryselect:function (e, ui) {
$("#d1").load("autocomplete-record.php?id="+ui.item.value);
}
Here our PHP script inside autocomplete-record.php will receive the ID value and return the matching record.
<?Php
error_reporting(0);// With this no error reporting will be there
require "config.php";
$id=$_GET['id'];
$q="select * from student where id=:id";
//echo $q;
$count=$dbo->prepare($q);
$count->bindParam(":id",$id,PDO::PARAM_INT,5);
if($count->execute()){
$row = $count->fetch(PDO::FETCH_OBJ);
echo "Name: $row->name , Class: $row->class, Mark: $row->mark";
}
?>
The data as returned by autocomplete-record.php file is displayed inside div layer id=d1
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |