Browse All Articles > A Simple Search Function Using PHP, JQuery and AJAX
Overview
This article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results.The principle behind the design of this code is to re-use the same code to generate the table of results for both the first render and subsequent AJAX search requests. In this way changes to the table structure and layout only have to be managed in one place.
The Container Page
We start with the container page that displays the initial view of the data we are interested in manipulating through AJAX. The code below gives a basic structure for us to work withindex.php
<!doctype html>
<html>
<head>
<title>AJAX Sample search page</title>
</head>
<body>
<h2>Super Hero Contact List</h2>
Search <input type="text" id="search" /> <input type="button" value="Search" id="search_button" /><br/>
<table id="superheros">
<thead>
<tr>
<th>Firstname</th><th>Surname</th><th>Age</th><th>Email</th>
</tr>
</thead>
<?php require_once('data.php'); ?>
</table>
</body>
</html>Rendering the results
The above page draws our Superhero contact list by calling an external PHP file (data.php) to render the actual rows of the table. Lets look at what data.php could look likedata.php
<?php
/*
FIRST: DEFINE OUR TEST DATA.
FOR OTHER IMPLEMENTATIONS THIS ARRAY COULD BE
POPULATED FROM A DATABASE OR ANY OTHER SOURCE
*/
$values = array(
array('firstname' => 'Peter', 'surname' => 'Parker', 'age' =>'21', 'email' =>'peter@arachnaphopia.com'),
array('firstname' => 'Clark', 'surname' => 'Kent', 'age' =>'36', 'email' =>'kal-el@krypton.com'),
array('firstname' => 'Bruce', 'surname' => 'Banner', 'age' =>'28', 'email' =>'hulk@bigandgreen.com'),
array('firstname' => 'Steven', 'surname' => 'RogersS', 'age' =>'95', 'email' =>'captain@merica.com'),
array('firstname' => 'Bruce', 'surname' => 'Wayne', 'age' =>'32', 'email' =>'bruce@batcave.com')
);
/* LOOP THROUGH THE ARRAY AND CONSTRUCT OUR ROWS */
foreach($values as $v) :
echo '<tr>
<td>' . $v['firstname'] . '</td><td>' . $v['surname'] . '</td><td>' . $v['age'] . '</td><td>' . $v['email'] .'</td>
</tr>';
endforeach;
?>Adding Search
The next step is to add our search capability. To do the search we are going to search on all fields for the entered string. To simplify this process we are going to run the search against a string produced from concatenating all the fields of the row together.$searchstr = implode(' ', $row);preg_match("/$pattern/", $searchstr);All that we need to do now to round off our data.php file is to put in the code to get the search expression from the AJAX call. If we assume that the value is posted to the script then it should be as simple as
$pattern = empty($_POST['search']) ? '' : $_POST['search'];Putting it all together
<?php
$values = array(
array('firstname' => 'Peter', 'surname' => 'Parker', 'age' =>'21', 'email' =>'peter@arachnaphopia.com'),
array('firstname' => 'Clark', 'surname' => 'Kent', 'age' =>'36', 'email' =>'kal-el@krypton.com'),
array('firstname' => 'Bruce', 'surname' => 'Banner', 'age' =>'28', 'email' =>'hulk@bigandgreen.com'),
array('firstname' => 'Steven', 'surname' => 'RogersS', 'age' =>'95', 'email' =>'captain@merica.com'),
array('firstname' => 'Bruce', 'surname' => 'Wayne', 'age' =>'32', 'email' =>'bruce@batcave.com')
);
/*
RETRIEVE THE SEARCH EXPRESSION
FROM THE POST. DEFAULT TO EMPTY
STRING IF NOT PRESENT
*/
$expr = empty($_POST['search']) ? '' : $_POST['search'];
foreach($values as $v) {
/* CREATE OUR SEARCH STRING */
$searchstr = implode(" ", $v);
/* LOOK FOR A PATTERN MATCH */
$rv = preg_match("/$expr/", $searchstr);
/* IF MATCHED OUTPUT ROW */
if ($rv > 0) :
echo '<tr>
<td>' . $v['firstname'] . '</td><td>' . $v['surname'] . '</td><td>' . $v['age'] . '</td><td>' . $v['email'] .'</td>
</tr>';
endif;
}
?>Additional search functionality can be implemented by experimenting with the preg_match search parameters to produce richer search functionality. Again this is left to the reader.
The AJAX
The final step is the AJAX component in the container page. As you will have deduced by now the results returned by the data.php script is plain html as opposed to JSON. This makes for a much simpler implementation on the AJAX side as the HTML can be loaded directly into the target container without having to run through a returned JSON object to create each of the elements in the result set. It also allows us to consistently define the format of the results in one central location.
Here is the JQuery we need to add to our container page.
index.php
/* FIRST UP INCLUDE JQUERY */
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
/*
CREATE AN EVENT HANDLER FOR
THE SEARCH BUTTON
/*
$('#search_button').click(function(e) {
/* DISABLE DEFAULT BEHAVIOUR FOR THE BUTTON */
e.preventDefault();
/* POST THE SEARCH TERM TO OUR data.php SCRIPT */
$.post('data.php', {search: $('#search').val()}, function(html) {
/*
LOAD THE RETURNED HTML TO THE
BODY OF THE RESULTS TABLE
*/
$('#superheros tbody').html(html);
});
});
});
</script><!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#search_button').click(function(e) {
e.preventDefault();
$.post('data.php', {search: $('#search').val()}, function(html) {
$('#superheros tbody').html(html);
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>Super Hero Contact List</h2>
Search <input type="text" id="search" /> <input type="button" value="Search" id="search_button" /><br/>
<table id="superheros">
<thead>
<tr>
<th>Firstname</th><th>Surname</th><th>Age</th><th>Email</th>
</tr>
</thead>
<?php require_once('data.php'); ?>
</table>
</body>
</html>Testing and Refining
Try entering different substrings to see what is returnedExample
bru
You will notice that you only get one result back. This is because our search is performing a case sensitive search. To make it case insensitive is as simple as adding an 'i' to the regular expression pattern in the data.php file
$rv = preg_match("/$expr/i", $searchstr);index.php
data.php
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (10)
Commented:
Commented:
How could we create a simple search form where lets say for example I have a page on my website called 'About Us' and a heading tag on that page called 'About Us' and I'm on the index page and I type 'about' in the search bar and hit enter it find the matching word and redirects to that page where the matching word is located?
Author
Commented:What you are describing here is for an indexed site search - you might want to look at tools like https://www.elastic.co/
Commented:
Author
Commented:View More