Что такое панель поиска?

Панель поиска — это окно поиска, когда пользователь вводит ключевое слово в поле поиска, если в базе данных есть какие-либо данные, связанные с этим ключевым словом. Таким образом, это видно пользователю в его браузере, в котором данные находятся в большом количестве, поэтому пользователь может легко найти информацию в соответствии со своими требованиями.

Как создать окно поиска с помощью JavaScript

Создание окна поиска с помощью JavaScript включает в себя код HTML, CSS или Bootstrap и JavaScript. Ниже представлена ​​базовая программа для создания простого окна поиска, фильтрующего список клиентов по типу пользователя. В этом руководстве мы будем извлекать данные из таблицы клиентов базы данных для динамического поиска или фильтрации, или вы также можете использовать статический список элементов HTML.g

См. также

  1. Живой поиск в PHP Mysqli с использованием jQuery AJAX
  2. Поиск по диапазону дат с использованием jQuery AJAX Date Picker с PHP MySQL

Создать базу данных и таблицу по SQL-запросу

В этом файле мы объясним вам, как создать базу данных и таблицу с помощью SQL-запроса. Я создал базу данных и таблицу webscodex. Таблица клиенты содержит записи и отображает их. Вы можете просто создать таблицу, выполнив следующий SQL-запрос.

-- 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', '[email protected]', '45454878', 'ST/25 b-22 Ved vihar kunj vihar delhi', 'DELHI', 'DELHI', 110056, 'India', '2023-08-02 01:19:59'),
(2, 'Rohan', '[email protected]', '5852458795', 'X-25, b-22 Nihal vihar karnal vihar delhi', 'DELHI', 'DELHI', 110043, 'India', '2023-08-02 01:20:02'),
(3, 'Emily Davis', '[email protected]', '9854851214', 'X-258 New York US of america 35655', 'New York ', 'New York ', 110056, 'US', '2023-08-02 23:49:36'),
(4, 'Ramasundar', '[email protected]', '89545478454', 'X-258 New York US of america 35655', 'New York ', 'New York ', 2154502, 'US', '2023-08-02 23:49:36'),
(5, 'Emily Davis', '[email protected]', '9854851214', 'X-258 New York US of america 35655', 'New York ', 'New York ', 110056, 'US', '2023-08-02 23:49:39'),
(6, 'Ramasundar', '[email protected]', '89545478454', 'X-258 New York US of america 35655', 'New York ', 'New York ', 2154502, 'US', '2023-08-02 23:49:39');

Создать подключение к базе данных

На этом этапе нам необходимо создать соединение с базой данных, здесь мы установим имя базы данных, имя пользователя и пароль. Итак, давайте создадим файл config.php в вашем проекте и поместим следующий код:

<?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); 
   }
?>

Создайте окно поиска HTML и отобразите данные о клиенте

На этой странице мы создадим окно поиска и таблицу, используя библиотеку Bootstrap, для более красивого и адаптивного дизайна. У меня есть список данных клиентов для поиска с использованием JavaScript.

См. также Как создать скрытый пароль с помощью jQuery или Javascript

Когда пользователь вводит ключевое слово в поле ввода, то при наличии записи в базе данных оно фильтруется с помощью JavaScript и показывается пользователю. Чтобы пользователь мог легко получить данные.

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/[email protected]/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>

Узнайте больше подробностей и других сообщений в блоге, нажав на ссылку



Как создать панель поиска с помощью JavaScript - WebsCodex
Панель поиска — это окно поиска, когда пользователь вводит ключевое слово в поле поиска, если есть какие-либо данные, связанные с этим …webscodex.com