PHP: Динамический поиск с использованием PHP, MySQL и AJAX

14/12/2021 00:55

Иногда нам нужно искать данные, не загружая всю страницу. Из этого туториала Вы узнаете, как реализовать поиск данных в реальном времени с помощью ajax, используя базу данных PHP mysql. Вы можете использовать бесплатный исходный код для поиска данных в реальном времени ajax с помощью jquery php mysql.

Создание динамического поиска с использованием PHP, MySQL и AJAX

Выполните следующие несколько шагов и легко реализуйте динамический поиск из базы данных в реальном времени на PHP, MySQL и jQuery:

1. Создайте файл подключения к базе данных.

На этом этапе вы создадите файл с именем db.php и обновите приведенный ниже код в своем файле.

Приведенный ниже код используется для создания подключения к базе данных MySQL в PHP. Когда мы вставляем данные формы в базу данных MySQL, мы подключаем туда этот файл:

<?php
    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "my_db";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");
      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
        }
?>

2. Создайте поисковую форму ajax.

На этом этапе вам нужно создать форму поиска ajax и обновить приведенный ниже код в форме поиска.

<!DOCTYPE html>
<html>

<head>
    <title>Ajax PHP MySQL Search Example</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>Search for users</h2>
                <input type="text" name="search" id="search" autocomplete="off" placeholder="search user name here....">
                <div id="output"></div>
            </div>
        </div>
    </div>

    <script type="text/jаvascript">
        $(document).ready(function() {
            $("#search").keyup(function() {
                var query = $(this).val();
                if (query != "") {
                    $.ajax({
                        url: 'ajax-db-search.php',
                        method: 'POST',
                        dаta: {
                            query: query
                        },
                        success: function(data) {

                            $('#output').html(data);
                            $('#output').css('display', 'block');

                            $("#search").focusout(function() {
                                $('#output').css('display', 'none');
                            });
                            $("#search").focusin(function() {
                                $('#output').css('display', 'block');
                            });
                        }
                    });
                } else {
                    $('#output').css('display', 'none');
                }
            });
        });
    </script>
</body>

</html>

3. Создайте скрипт PHP для поиска в БД.

На этом этапе вам нужно создать одно имя файла ajax-db-search.php и обновить приведенный ниже код в своем файле.

Приведенный ниже код предназначен для поиска в таблице базы данных MySQL с использованием скрипта Ajax PHP:

<?php
  require_once "db.php"; // подключаемся к БД
 
  if (isset($_POST['query'])) {
     
    $query = "SELECT * FROM users WHERE name LIKE '{$_POST['query']}%' LIMIT 100";
    $result = mysqli_query($conn, $query);
 
  if (mysqli_num_rows($result) > 0) {
     while ($user = mysqli_fetch_array($result)) {
      echo $user['name']."<br/>";
    }
  } else {
    echo "<p style='color:red'>User not found...</p>";
  }
 
}
?>

Вывод

В этом руководстве вы узнали, как реализовать динамический поиск в реальном времени на PHP с таблицей базы данных MySQL с использованием кода PHP. Это очень простой и легкий пример динамического поиска ajax в базе данных MySQL с использованием PHP.

PHP

1 + 4 -

MakeCodes
0
2 009