How to Highlight Matched Keywords in Search Result using PHP

January 9, 2021

PHP

Tutorial: How to Highlight Matched Keywords in Search Result using PHP with Source Code

Getting Started on How to Highlight Matched Keywords in Search Result

This tutorial is on how to highlight matched keywords in a search result using PHP. To beautify the view of this tutorial, I’ve used Bootstrap which is included in the downloadable of this tutorial, but if you want, you can download Bootstrap using this link.

Note: preg_filter() function is available on PHP >= 5

Creating a Database

Next, we create the database that we are going to filter in this tutorial.

I’ve included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named mydb.

Creating a Form and Script

Lastly, we create our search form and the script if the form is submitted.

Please create a new file, name it as index.php and paste the codes below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>How to Highlight Matched Keyword in Search using PHP</title>
    <link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
    <style type="text/css">
        .mt20{
            margin-top:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center mt20">Highlight Matched Keyword in Search</h1>
    <div class="row justify-content-center mt20">
        <div class="col-sm-6">
            <form method="POST">
                <div class="input-group input-group-lg">
                  	<input type="text" name="keyword" class="form-control" placeholder="Firstname, Lastname or Nickname" aria-describedby="basic-addon2">
                  	<div class="input-group-append">
                    	<button class="btn btn-outline-secondary" type="submit" name="search">Search</button>
                  	</div>
                </div>
            </form>
            <?php
                if(isset($_POST['search'])){
                    $keyword = $_POST['keyword'];
 
                    //connection
                    $conn = new mysqli('localhost', 'root', '', 'mydb');
 
                    $sql = "SELECT * FROM members WHERE firstname LIKE '%$keyword%' OR lastname LIKE '%$keyword%' OR nickname LIKE '%$keyword%'";
                    $query = $conn->query($sql);
 
                    if($query->num_rows > 0){
                        echo "<h5 class='mt20'>Search results for '<i>".$keyword."</i>'</h5>
                            <ul>
                        ";
 
                        while($row = $query->fetch_assoc()){
 
                            $fullname = $row['firstname'].' "'.$row['nickname'].'" '.$row['lastname'];
                            $highlighted = preg_filter('/' . preg_quote($keyword, '/') . '/i', '<b>$0</b>', $fullname);
                            echo "<li>".$highlighted."</li>";
 
                        }
 
                        echo "</ul>";
                    }
                    else{
                        echo "
                            <h5 class='mt20'>No search results found for '<i>".$keyword."</i>'</h5>
                        ";
                    }
 
                }
            ?>
        </div>
    </div>
</div>
</body>
</html>