Search Data Using jQuery – Step By Step Guide!
Users don’t have to wait for those web contents such as images, text, flash files, etc. to load because the app will refresh only a part of a web page. Thanks to AJAX group of technologies (AJAX in not a technology in itself).
Today I’m gonna show you a data searching example without refreshing a page:
- User will input a name on the textbox.
- User can click the search button or just simply press enter to start search.
- A loader image will be shown.
- Loader image will hide when search result comes in.
In this tutorial, we will need five files:
- js/jquery-1.4.2.min.js - the main weapon
- images/ajax-loader.gif - loader image (animated ofcourse)
- config_open_db.php - for database connection
- index.php - read below
- search_results.php - read below
Step 1: We should have the following table structure. Just insert your own data.
CREATE TABLE `users` (
`id` int(11) not null auto_increment,
`firstname` varchar(32) not null,
`lastname` varchar(32) not null,
`email` varchar(32),
`username` varchar(32) not null,
`password` varchar(32) not null,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=23;
Step 2: Create config_open_db.php file and put the following code.
<?php
// used to connect to the database
$host = "localhost";
$db_name = "your_db_name";
$username = "your_db_username";
$password = "your_db_password";
try {
$con = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
}
// show error
catch(PDOException $exception){
echo "Connection error: " . $exception->getMessage();
}
?>
Step 3: We will have the user interface here in our index.php file with these codes:
<html>
<head>
<title>Data Searching Without Page Refresh</title>
</head>
<body>
<!--
we will preload the loader image
to show it instantly on search
-->
<div style='display:none;'>
<img src="images/ajax-loader.gif" />
</div>
<form name = "form">
<div>Try to search for "dalisay" or "Chris" then click the Search Button or just press Enter</div>
<!-- where our search value will be entered -->
<input type="text" name="name" id="fn" />
<!-- This button will call our JavaScript Search functions -->
<input type="submit" value="Search" id="search-btn" />
</form>
<div id = "s-results">
<!-- This is where our search results will be displayed -->
</div>
<div style='clear:both;'></div>
<div class='back-link' style='margin:3em 0 0 0;'>
<a href='https://www.codeofaninja.com/2010/11/how-to-searching-without-page-refresh.html'>Back to tutorial page</a>
</div>
<!-- import jQuery file -->
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
// jQuery code will be here
</script>
</body>
</html>
Step 4: jQuery code that will make the front-end work and send request to back-end. Replace "// jQuery code will be here" line above with the following code.
$(document).ready(function(){
//load the current contents of search result
//which is "Please enter a name!"
$('#s-results').load('search_results.php').show();
$('#search-btn').click(function(){
showValues();
});
$(function() {
$('form').bind('submit',function(){
showValues();
return false;
});
});
function showValues() {
//loader will be show until result from
//search_results.php is shown
$('#s-results').html('<p><img src="images/ajax-loader.gif" /></p>');
//this will pass the form input
$.post('search_results.php', { name: form.name.value },
//then print the result
function(result){
$('#s-results').html(result).show();
});
}
});
Step 5: This search_results.php file gets the request from our interface and then returns a result that will be displayed on the interface (index.php) too.
<?php
include_once("config_open_db.php");
//define index
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : "";
if( empty( $name )){
// this will be displayed if search value is blank
echo "Please enter a name!";
}else{
// this part will perform our database query
$query = "select * from users where firstname like ? OR lastname like ?";
// prepare query statement
$stmt = $con->prepare($query);
// bind variables
$query_search_term = "%{$name}%";
$stmt->bindParam(1, $query_search_term);
$stmt->bindParam(2, $query_search_term);
// execute query
$stmt->execute();
// count number of categories returned
$num = $stmt->rowCount();
if($num>0){
// this will display how many records found
// and also the actual record
echo "<div style='margin: 0 0 10px 0; font-weight: bold;'>$num record(s) found!</div>";
// loop through the categories and show details
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
echo "<div>" . $row['firstname'] . " " . $row['lastname'] ."</div>";
}
}else{
// if no records found
echo "<b>Name not found!</b>";
}
}
?>
Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!
[purchase_link id="12316" text="Download Now" style="button" color="green"]
Related Tutorials
Thank you for learning from our post about: Search Data Using jQuery - Step By Step Guide!
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.