What’s a Search Bar?
Search bar is a search box when the user types a keyword in the search box, if there is any data related to that keyword in the database. So it is visible to the user in his browser, in which the data is in bulk so that the user can easily find the information as per his requirement.
How to Build a Search box with JavaScript
Creating a search box with JavaScript involves HTML, CSS, or Bootstrap and JavaScript code. Below is a basic program to create a simple search box that filters a list of customers based on user type. In this tutorial we will fetch data from database customer table to search or filter dynamically or you can use for the static HTML list of items also.g
See also
- Live Search in PHP Mysqli using jQuery AJAX
- Search with Date Range using jQuery AJAX Date Picker with PHP MySQL
File Structure
// ProjectFolderName/
|__ index.php
|__ config.phpCreate Database and Table by SQL query
In this file We will explain you how to create database and table using sql query. I created webscodex database and table. customers table holds the records and displayed it. You can simply create table as following SQL query.
-- Database: `webscodex` -- -------------------------------------------------------- -- Table structure for table `customers` -- CREATE TABLE `customers` ( `id` int(11) NOT NULL AUTO_INCREMENT AUTO_INCREMENT, `name` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `mobile_number` varchar(50) NOT NULL, `address` text NOT NULL, `city` varchar(50) NOT NULL, `state` varchar(50) NOT NULL, `pincode` int(50) NOT NULL, `country` varchar(50) NOT NULL, `created_at` datetime NOT NULL DEFAULT current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; INSERT INTO `customers` (`id`, `name`, `email`, `mobile_number`, `address`, `city`, `state`, `pincode`, `country`, `created_at`) VALUES (1, 'manish', 'manish54@gmail.com', '45454878', 'ST/25 b-22 Ved vihar kunj vihar delhi', 'DELHI', 'DELHI', 110056, 'India', '2023-08-02 01:19:59'), (2, 'Rohan', 'rohan54@gmail.com', '5852458795', 'X-25, b-22 Nihal vihar karnal vihar delhi', 'DELHI', 'DELHI', 110043, 'India', '2023-08-02 01:20:02'), (3, 'Emily Davis', 'EmilyDavis@gmail.com', '9854851214', 'X-258 New York US of america 35655', 'New York ', 'New York ', 110056, 'US', '2023-08-02 23:49:36'), (4, 'Ramasundar', 'Ramasundar54@gmail.com', '89545478454', 'X-258 New York US of america 35655', 'New York ', 'New York ', 2154502, 'US', '2023-08-02 23:49:36'), (5, 'Emily Davis', 'EmilyDavis@gmail.com', '9854851214', 'X-258 New York US of america 35655', 'New York ', 'New York ', 110056, 'US', '2023-08-02 23:49:39'), (6, 'Ramasundar', 'Ramasundar54@gmail.com', '89545478454', 'X-258 New York US of america 35655', 'New York ', 'New York ', 2154502, 'US', '2023-08-02 23:49:39');
Create Database Connection
In this step, we require to create database connection, here we will set database name, username and password. So let’s create config.php file on your project and put bellow code:
<?php
// Database configuration
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "webscodex";
// Create database connection
$con = new mysqli($hostname, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>Create HTML Search Box and Display Customer Data
In this page we will create a search box and table using Bootstrap library for more beautiful and responsive design. I have listing the customers data for searching using JavaScript.
When the user enters a keyword in the input field, then if there is a record in the database according to which it is filtered with the help of JavaScript and shown to the user. So that the user can get the data easily.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create Working Search Bar Using HTML and JavaScript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-success mt-5 mb-5 text-center">Create Working Search Bar Using HTML and JavaScript</h1>
<div class="col-md-6 offset-3">
<div class="mb-3">
<input type="text" class="form-control" onkeyup="searchTableData()" id="search" placeholder="Search Customers..." />
</div>
</div>
<div class="mb-12">
<div class="table-responsive table-stripe" id="DataTable">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Mobile number</th>
<th scope="col">Address</th>
<th scope="col">City</th>
<th scope="col">State</th>
<th scope="col">Pincode</th>
<th scope="col">Country</th>
<th scope="col">Created</th>
</tr>
</thead>
<tbody>
<?php
// Include Configuration File
include_once "config.php";
$query = "SELECT * FROM customers";
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['name'] ?></td>
<td><?php echo $row['email'] ?></td>
<td><?php echo $row['mobile_number'] ?></td>
<td><?php echo $row['address'] ?></td>
<td><?php echo $row['city'] ?></td>
<td><?php echo $row['state'] ?></td>
<td><?php echo $row['pincode'] ?></td>
<td><?php echo $row['country'] ?></td>
<td><?php echo $row['created_at'] ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function searchTableData() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("DataTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[i];
console.log(td);
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</html>
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊
