Simple JS Search. More info on https://blog.expertrec.com/create-javascript-search-box-for-your-website/

README.md

Simple JS Search

Code sample to implement simple search for any website using use

• HTML5
• JavaScript
• PHP
• MySQL

This code sample was developed to enumerate the pitfalls of standard search that is generally used by developers.

More info on https://blog.expertrec.com/create-javascript-search-box-for-your-website/

backend.php

<?php

/**
 * Filename: backend.php
 * Project: simple-js-search
 * Description: Backend that does data query from database using like function
 * for the simple-js-search plugin.
 */

if ( ! $_GET['q'] ){
    return ;
}

$q = $_GET['q'];
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    $servername = "localhost";
$username = "shopadmin";
$password = "shopadmin1234!@#$";
$dbname = "book_shop";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";

// Select database
if ( ! mysqli_select_db($conn,$dbname) ) {
    echo "Database select failed !!";
}

$query = "SELECT *
  FROM books
 WHERE title LIKE '%$q%'";

 $results = mysqli_query($conn,$query);

 //print_r($results);
 //$result_arr = [];

 if(mysqli_num_rows($results) > 0){

    // Fetch result rows as an associative array
    while($result_arr[] = mysqli_fetch_assoc($results));

    // remove last empty entry.
    array_pop($result_arr);
    // Set the status to success, since we got the results.
    $response['status'] = 'success';

    // Add results received from database to response.
    $response['results'] = $result_arr;
} else {
    $response['status'] = 'failed';
}

$response['results'] = $result_arr;

// add instruction for the browser to interpret correctly as JSON.
header('Content-Type: application/json');
echo json_encode($response);

mysqli_close($conn);
?>

database.sql

-- This is the capture of the commands that you can execute in mysql shell / mysql commandline 

-- create database 
create database book_shop default character set utf8;

-- create user and password
create user 'shopadmin'@'localhost' identified by 'shopadmin1234!@#$';

-- grant privileges to the user
GRANT ALL PRIVILEGES ON * . * TO 'shopadmin'@'localhost';

-- if you get `access denied error` if you are loggedin as other than root, 
-- so login as root and try the same 

sudo mysql -u root 

-- Now after login as root user, try giving privileges to the user 

GRANT ALL PRIVILEGES ON * . * TO 'shopadmin'@'localhost';

-- Now login as shopadmin for rest of the tasks to be done.

mysql -u shopadmin -p

use book_shop;

create table books (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    title varchar(255),
    author varchar(255)
);


INSERT into books (title, author) VALUES 
    ('Exploring C', 'Yashavant Kanetkar'),
    ('Object Oriented Programming with C++','Balagurusamy'),
    ('Introduction to algorithms','Thomas H Cormen'),
    ('Design of The Unix Operating System','Maurice J. Bach');

index.html

<!DOCTYPE html>
<html lang="en">
    <head>

    </head>
    <body>
        <div>
            <div id="search-box-container">
                <form action="backend.php" method="get">
                    <input type="text" name="search-query" id="search-query" placeholder="Search for book title">
                    <input type="submit" name="submit" value="Submit">
                </form>
            </div>
            <div id="search-result-container">

            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="simple-search.js"></script>

    </body>
</html>

simple-search.js

/**
 * filename: simple-search.js
 * description: This file contains the javascript for the simple ajax search using 
 * javascript.
 */

$(function() {
    console.log( "ready!" );

    $( "#search-query" ).keyup(function() {
            var q = $( "#search-query" ).val();
            console.log( "Handler for keyup called. " + q );
            $.ajax({
                url: "backend.php",
                data: { q: q },
            }).done(function(response) {
            
                // clear the results div previous results.
                $( "#search-result-container" ).html( "<ul></ul>" );
                response.results.forEach(function(obj) { 
                    console.log(obj.title); 
                    $( "#search-result-container" ).append( "<li>"+obj.title+"</li>" );
                });
            });
    });

});