Home jQuery

Search Data Using jQuery – Step By Step Guide!

Today, we will learn how to search data using jQuery. It will be very convenient for the users of your web application if you can load more data from the database without refreshing the whole page.

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:

  1. User will input a name on the textbox.
  2. User can click the search button or just simply press enter to start search.
  3. A loader image will be shown.
  4. 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!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Related Tutorials

Thank you for learning from our post about: Search Data Using jQuery - Step By Step Guide!

23 replies
  1. Nick
    Nick says:

    Hi, thanks fot the tutorial. How can I use a form with 2 input (in the same form). I mean, if I’d like to have a form with Name field and Surname field, then to execute a query like
    SELECT *
    FROM partecipants
    WHERE Name=name
    AND Surname=Surname

    how can I use jQuery with two parameters?
    Thanks!
    Nick

  2. Mike Dalisay
    Mike Dalisay says:

    You’re welcome Nick! Hmm In this part:

    $.post(‘search_results.php’, { name: form.name.value },

    try to have something like:

    $.post(‘search_results.php’, { name: form.name.value, nickname: form.nickname.value },

    and in the search_results.php:

    isset( $_REQUEST[‘nickname’] ) ? $nickname=$_REQUEST[‘nickname’] : $nickname=”;

  3. Jack
    Jack says:

    Such A Good Coding..I Ever Seen in Internet.I am Really fan of ur blog.Pls Guide me::
    In ur original code,
    the Search result displayed in one line.
    My Ques:If i m going to make table with different colour(Actually i tried with normal php echo but nothing happened.)Pls help me to make table.My Desire the display result(like fstname.lstname )will be shown in table…Say Table Name:”DETAILS”
    Other Row Names:FIRSTNAME & LASTNAME.Pls give the modification.

  4. Anonymous
    Anonymous says:

    Hi you did a pretty good job!! ;) I have a question though, considering this code but instead of a $name surname ect. we replace them with just $name and $url, once we display the name how can you make:

    1)the name displayed from the result clickable which let you get the same $url stored in the database?

    2)Hide the $url on display?..

    basically just echo name that once clicked get the url on the same row on database(mysql)

    Hope I made myself clear..thanks in advance!!

    If THERE IS SOMEONE WHO CAN SOLVE THAT, YOU ARE THE ONE,I’M SURE!!

  5. Anonymous
    Anonymous says:

    Hi Mike thanks for answer my post but I actually tried your demo after i sent you the post.. and it doesn’t work like the one in your website… I even tried to make the same table and everything, and just change the config_open_db.php,
    hope you can guide me and check if there is something wrong with the scripts on the demo.. thank you so much again!!

  6. Anonymous
    Anonymous says:

    Hi Mike i sent you an email as the post was too long..
    by the way have you ever think to move in London for awhile ?
    if you do let me know I will like to include you in some of my projects ;)

  7. Anonymous
    Anonymous says:

    Hello
    what about display the full page of “index.php” in all the pages of a web site
    but calling the index.php from one folder
    let’say /search/index.php
    and
    kind of include the full index.php with the box and everything to be displayed in all the pages of a website,

    like that if i need to change anything an image or different box and style i just replaced the php file in /search /index.php and automatically will be shown in all of my pages..
    is that even possible in php or any other language?
    frank ;)

  8. Mike Dalisay
    Mike Dalisay says:

    @Anon: What you can do is to create another PHP file with the selected code from index.php, and then ‘include’ it to all the pages that have to use it. Yes, I believe it is also possible in other language, and much easier to implement if you know OOP. :D

  9. Hell
    Hell says:

    what if the result in search_result.php not echo but a textbox, the textbox will appear when we search data

    how to make it the textbox appear from the start when open index.php?

    help me please!

  10. bruz
    bruz says:

    This code is awesome, i love it. Thanks for the great post Mike. Could you perhaps give us hints on how we can use it with multiple forms on the same page. So far it only works with only one form.

  11. sadique khan
    sadique khan says:

    Hi Mike. such a wonderful tutorial, Thanks so much.
    However i want to know how can restrict number of results to just one (One result at a time) or if there are any possibility to restrict the number of digit in textbox (Actually i am trying to use your code for zip/pincode search so i want to fix the numbers of digit to 6 because in my country we have pincode like 831001, 110001 etc.) then user’s will have to enter exact pincode to see the result.

    Hope to hear from you soon
    Thanks Again

    • ninjazhai
      ninjazhai says:

      Hello sadique khan, I’m glad you found our tutorial useful!

      Regarding your first question, you can restrict the result by changing the query to “select * from users where firstname like ‘%$name%’ limit 0,1”

      About your second question, you can do that using the MAXLENGHT attribute of the text box. It should look like this:

      • sadique khan
        sadique khan says:

        Hello Ninjazhai i ran into another problem now please help me. My problem is:
        form is correctly searching first entry from table when i searched it. it dont display others entry when i try to search with other pincodes eg: my first pincode is 830001 it display right but when i type 830002 it display not available but in my table i have 3000+ pincodes.
        my table structure is:
        table name : pincode
        which contain two columns :
        1 is ID int(5) not null auto_increment;

        2 is pin varchar(15) not null ;

        please help me.
        Thanks

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.