How to Create Quick Search using PHP/MySQL with jQuery

Submitted by alpha_luna on Tuesday, July 26, 2016 - 13:26.

In this tutorial, we are going to create Quick Search using PHP/MySQL with jQuery. Search query using PHP/MySQL is a PHP source code that the users enable to quick search in the table. Creating TextBox for the user where they can type their desired word to quick search data and the table with our data in a data table.

Let's Begin

Creating Markup
Creating Database Connection
Creating PHP Script

First, we are going to create our simple HTML source code. Kindly copy and paste this markup to your BODY tag of your page.

<div class="container">
    <div class="row-fluid">
        <div class="span12">
<br />
<br />
            <div class="row-fluid">
                <div class="span6">
                    <div class="span6">
                        <form method="POST" action="search.php" class="navbar-search pull-left">
                            <input type="text" name="search" class="search-query" placeholder="Search">
                        </form>
                    </div>
<br />
<br />
<br />
                    <table class="table table-bordered  table-hover table-striped" style="width:800px;"> 
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Author</th>
                                <th>Category</th>
                                <th>Year Publication</th>
                                <th>Place Publication</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                $query=mysql_query("select * from book")or die(mysql_error());
                                while($row=mysql_fetch_array($query)){
                                ?>
 
                                <tr>
                                    <td><?php echo $row['title']; ?></td>
                                    <td><?php echo $row['author']; ?></td>
                                    <td><?php echo $row['category']; ?></td>
                                    <td><?php echo $row['year_publication']; ?></td>
                                    <td><?php echo $row['place_publication']; ?></td>
                                </tr>
                                <?php
                                }
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Second, create a database connection for our data that we are going to save in the database. Database name is "search_query".

<?php
 
mysql_select_db('search_query',mysql_connect('localhost','root',''))or die(mysql_error());
 
?>

Third, our PHP script where we can filter those desired words that enter by the user to search in the TextBox.

<table class="table table-bordered  table-hover table-striped" style="width:800px;"> 
    <thead>
        <tr>
            <th>Title</th>
            <th>Author</th>
            <th>Category</th>
            <th>Year Publication</th>
            <th>Place Publication</th>
        </tr>
    </thead>
    <tbody>
<?php
if (isset($_POST['search'])){
 
    $search=$_POST['search'];
    
    $query=mysql_query("select * from book where category like '%$search%' or title like '%$search%' or 
        author like '%$search%' or year_publication like '%$search%' or place_publication like '%$search%' ")or die(mysql_error());
    while($row=mysql_fetch_array($query)){
    ?>
    <tr>
        <td><?php echo $row['title']; ?></td>
        <td><?php echo $row['author']; ?></td>
        <td><?php echo $row['category']; ?></td>
        <td><?php echo $row['year_publication']; ?></td>
        <td><?php echo $row['place_publication']; ?></td>
    </tr>
    <?php
    }}
    ?>
</tbody>
</table>

After compiling those source codes above, this would be the result after the user type their desired words to quick search using TextBox on the table as you can see in the image below. Result

Hope that this simple tutorial that I created may help you to your future projects. Also, for the beginners who want to learn basic of coding in PHP/MySQL. If you are interested in programming, we have an example of programs that may help you even just in small ways. If you want more tutorials, you can visit our website, click here Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

932 views