Live search is starting to become more and more mainstream. With the advent of Ajax the ability to carry out searches without leaving the page have obviously started to appear more and more. The trouble with live searching though, is it can be quite resource intensive. Every keystroke in theory returns a bunch of search results, perhaps relevant, perhaps not. On a busy site this could have quite an impact.

In this tutorial I will demonstrate the same basic theory, live searching (demo) – however I am not showing the user any results until they execute the search. Instead, I am responding with a search result count in a live manner (after every key stroke), but actually returning the results on a button click or [ENTER] key press.

Live MySQL searching with jQuery (Click for demo)

What this does is cut down on the amount of data whizzing around after every keystroke, cutting down database activity and more importantly bandwidth reduction. It also gives the user some relevant feedback on their search so they can see if their search term actually matches any results in the first place before submitting it in a very economical fashion.

Click Here For Demo

The HTML

First up, lets create the basic HTML page. A couple of containers for the form elements and a container for the results.

<div id="form">

<input type="text" id="searchbox" name="searchbox" />

<div id="buttonContainer">

<a class="button" id="submitbutton" href="#"><span id="buttontext">Search</span></a>

</div>

</div>

<div id="resultsContainer"></div>

The PHP

The PHP part of this is very simplistic in its approach, it is returning HTML data rather than XML or JSON objects – it’s up to you to take that next step. The script has two roles, 1 – To return a result count number, and 2 – to return search results. You could seperate these into two scripts if you want, but I’ve put them into one for now…

if(isset($_GET['query'])) { $query = $_GET['query']; } else { $query = ""; }

if(isset($_GET['type'])) { $type = $_GET['type']; } else { $query = "count"; }

if($type == "count")

{

$sql = mysql_query("SELECT count(url_id)

FROM urls

WHERE MATCH(url_url, url_title, url_desc)

AGAINST('$query' IN BOOLEAN MODE)");

$total = mysql_fetch_array($sql);

$num = $total[0];

echo $num;

}

if($type == "results")

{

$sql = mysql_query("SELECT url_url, url_title, url_desc

FROM urls

WHERE MATCH(url_url, url_title, url_desc)

AGAINST('$query' IN BOOLEAN MODE)");

while($array = mysql_fetch_array($sql)) {

$url_url = $array['url_url'];

$url_title = $array['url_title'];

$url_desc = $array['url_desc'];

echo "<div class=\"url-holder\"><a href=\"" . $url_url . "\" class=\"url-title\" target=\"_blank\">" . $url_title . "</a>

<div class=\"url-desc\">" . $url_desc . "</div></div>";

}

}

You’ll need to ignore the table and column names in the MySQL query, however you get the idea. For the “count” section the query is simply returning a result count to the browser, e.g. “3″. For the “results” section the script is returning chunks of HTML that our jQuery will consume and display on the page.

You also need to consider tightening up security on the form input, so validate what is coming in to ensure there is no SQL injections going on etc – I’ve really tried to just give you the basics here.

The jQuery

Finally, the jQuery. I am also using a snipsy bit of jQuery UI which you will need to include (but you can get all that from the download link at the end of this article).

$(document).ready(function() {

$("#searchbox").keyup(function(){

$.get("search.php",{query: $("#searchbox").val(), type: "count"}, function(data){

$("#buttontext").html(data + " Results Available");

});
});

$("#searchbox").keyup(function(event){

if(event.keyCode == "13")
{
getResults();
}

});

$("#submitbutton").click(function(){

getResults();

});

function getResults()
{

$.get("search.php",{query: $("#searchbox").val(), type: "results"}, function(data){

$("#resultsContainer").html(data);
$("#resultsContainer").show("blind");
});
}

});

So on the keyup event on the search box, my live search count is being fired and returning this count number into my form button. Depending on the performance of your hardware this will be instant, or a bit laggy. Once you are satisfied with your search term and you know that there will be results, you can hit the “Enter” key or the button to display the results. At that point, the PHP script is called again and returns the HTML chunks as described before.

Download

Download

As usual, click the box icon on the left to download the code in full including CSS and supporting image files. Hope you enjoy it, you’ll need to change the MySQL database connection variables, as well as the queries against the relevant tables etc…

Tools to help you learn…

Learning jQuery 1.3	PHP MySQL Development	jQuery UI 1.6