Live Dynamic search of MySQL table using jquery and php

Question

I am sure there are a number of articles covering this topic, but every piece of code I try just doesn't seem to work. If this has been answered somewhere else already, I am sorry that I could not find it.

I am trying to create a live search that displays all data in my table until someone starts typing in an input field. As soon as they start typing a key, I want to run a select query on my table to narrow the results if any of the columns contain the string that is currently being typed (kind of like how google starts showing you results as you type in the search bar).

My code seems to work up until I try to use either $.get or $.post to interact with my php file that runs the MySQL search. I am kind of new to web development and have been teaching myself as I go along, but this one has stumped me for 2 days now. Here is the code I currently have (although I have tried about 20 different versions):

jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

document.getElementById("search").onkeyup(searchScript());

function searchScript(){

var search = $("#search").val();
if(search==""){
return;
}
else{
$.get("resultspage.php",{search : search},function(result){
$("#results").html(result);
}});
}

</script>
<table id="results">
<?php
<...var assignments storing my db login data...>
$con=mysqli_connect($host,$username,$password,$database);


$sql="SELECT * FROM Registration";

if(mysqli_query($con,$sql)){
$result=mysqli_query($con,$sql);
}
else{
echo "error: " . mysqli_error($con);
}

while($row=mysqli_fetch_array($result))
{
<...code that displays the results...>

?>
</table>

My PHP file

$search=$_GET['search'];

<...variables storing log in data...>

$con=mysqli_connect($host,$username,$password,$database);


$sql="SELECT * FROM Registration WHERE CONCAT(fName,lName,storeName,numLocations,primaryPhone,secondPhone,email,products) LIKE %$search%";

if(mysqli_query($con,$sql)){
$result=mysqli_query($con,$sql);
}
else{
echo "error: " . mysqli_error($con);
}

while($row=mysqli_fetch_array($result))
{
<...code that displays results....>
}

Any help would be much appreciated! Thank you.

Answer 1

Recognizing that jquery is another mountain to climb, I would still learn & use it for it's simplicity. Once the data has been retrieved from the server, use jquery to hide the values not starting with or containing the entered value (.match() below), instead of repeated calls to the server.

Not knowing the structure of your table, a framework you might try:

$( "#search" ).keyup(function() {
    // Test search letter entry is working 
    alert( "Handler for .keyup() called." );

    var s = $("#search").attr("value");    // Typed in letter
    // Pass an array of table contents
    // there are a couple ways you could approach the 'gathering' of table items...
    $(".individual-item-class").each(function(index, element) {
         if (!element.match(/s/))
             $(element:parent).css("display","none");
         else
             $(element:parent).css("display","table-row")
    }):
});

This code will not get you off the ground, but pointed in a direction.

You can learn about selectors and a few jquery functions. Used here are each() , attr() and css() .