Show results from live search AJAX - ajax

Question

I have a page that shows all results of my database, I have checkboxes and textboxes on the page wich I use to filter the results on the page.
The checkboxes are working, so when you check a textbox the results on the page are getting live filterd. Now I want the same for the textboxes but im stuck how to do it.
this is my code for the textboxes that im using that I also want to use for the textboxes.
<script>
function makeTable(data) {
var tbl_body = "";
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
return tbl_body;
}
function getEmployeeFilterOptions(){
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.name);
}
});
return opts;
}
function updateEmployees(opts){
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#employees tbody').html(makeTable(records));
}
});
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getEmployeeFilterOptions();
updateEmployees(opts);
});
updateEmployees();
</script>
PHP
<?php
$pdo = new PDO('mysql:host=localhost;dbname=records', 'root', '***');
$select = 'SELECT *';
$from = ' FROM overboekingen';
$opts = (isset($_POST['filterOpts']) ? $_POST['filterOpts'] : FALSE);
if (is_array($opts)) {
$where = ' WHERE FALSE';
if (in_array("medewerker", $opts)){
$where .= " OR medewerker = 1 ";
}
if (in_array("medewerker1", $opts)){
$where .= " OR medewerker = 2 ";
}
if (in_array("medewerker2", $opts)){
$where .= " OR medewerker = 3 ";
}
if (in_array("medewerker3", $opts)){
$where .= " OR medewerker = 4 ";
}
if (in_array("medewerker4", $opts)){
$where .= " OR medewerker = 5 ";
}
if (in_array("medewerker5", $opts)){
$where .= " OR medewerker = 6 ";
}
if (in_array("medewerker6", $opts)){
$where .= " OR medewerker = 7 ";
}
if (in_array("medewerker7", $opts)){
$where .= " OR medewerker = 8 ";
}
if (in_array("medewerker8", $opts)){
$where .= " OR medewerker = 9 ";
}
if (in_array("medewerker9", $opts)){
$where .= " OR medewerker = 10 ";
}
if (in_array("medewerker10", $opts)){
$where .= " OR medewerker = 11 ";
}
else {
$where = false;
}
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>

Answer 1

I am not sure how your submit.php works, but I assume you can send keywords as "filterOpts" and the correct JSON is returned? If this is correct, you can make the AJAX call when the user changes the input field and send the value of the input each time:
The first block of code simple calls the updateEmployeesText function whenever the 'input' element is changed (basically whenever the user types). Note that we pass $(this).val as a parameter, which is the text inside the textbox.
$('input').change(function(){
updateEmployeesText($(this).val());
});
This block of code calls submit.php asynchronously. It passes the value of the textbox as a POST parameter. After submit.php has returned, the success function is executed and the table is updated.
function updateEmployeesText(val){
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {text: val},
success: function(records){
$('#employees tbody').html(makeTable(records));
}
});
}
In your PHP you can now get that value using $val = $_POST['text']. This is the string you want to search for in the DB. I have outlined the steps below:
Establish PDO (already done)
Now use SELECT * FROM your_table WHERE your_field LIKE '% . $val . %' OR ... (you can keep going)
NOTE: the % at the start and end do a partial search, so anything before or after val will also be returned
Now execute the statement and get the array
Encode the array as JSON and return!
Hope this helps!
EDIT for PHP:
This block of code does everything as described above. Note the partial search used in the SQL LIKE statement. The % indicates wildcard characters before or after $val. For example, if the value was 'cat', the script would search for %cat% which would return results for bcat, cat, fcatr, fggcatrr, etc... Essentially anything containing cat. If you wanted a script that ended with cat you would use '%cat' (%$val) and if you wanted something that began with cat you would use 'cat%' (%$val).
$pdo = new PDO('mysql:host=localhost;dbname=records', 'root', '***');
$select = 'SELECT *';
$from = ' FROM overboekingen';
$val = $_POST['val'];
$where = "WHERE medewerker LIKE '%$val%';
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);

Answer 2

Don't know if I got your point, you want to have that ajax live feature on inputs as well as checkboxes ?
If so, I'd do something like
$('yourinputselector').keyup(function() {
var user_input = $(this).val();
if (user_input.length > 3) // or any min-chars number
{
// process your ajax request here
}
});