How to implement a search prompt box using php-PHP Problem-php.cn

How to implement a search prompt box using php

PHPz

Release： 2023-03-22 09:54:02

Original

1681 people have browsed it

On modern websites, a useful search box is indispensable. This feature can greatly simplify the user's search process and improve the user experience of the website. Adding a prompt box next to the search box brings the user's search efficiency to a new level. So, this article will introduce how to use PHP to implement a search box prompt box function.

1. Implementation Principle

In the process of implementing the search prompt box in PHP, we need to use AJAX technology. It is mainly divided into the following steps:

The user enters the search keyword in the search box.
Send keywords to the server-side PHP script.
On the server side, search results related to keywords are obtained by querying the database or other data sources.
Encapsulate the search results into JSON data format and return it to the client.
After the client receives the data returned by the server, it uses JavaScript to display it below the search box to form a search prompt box.

2. Implementation steps

Establish a database table

We first create a database table named products 's product table contains the following fields:

id          int(11)         商品 ID
name        varchar(255)    商品名称
description text            商品描述
price       decimal(10,2)   商品价格

Copy after login

Write database query function

We need to write a query() function to connect database and executes the query, returning an array of results. An example is as follows:

<?php
function query($query) {
    $database = new PDO(&#39;mysql:host=localhost; dbname=database_name&#39;, &#39;database_user&#39;, &#39;database_password&#39;);
    $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $database->prepare($query);
    $stmt->execute();
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

Copy after login

Write search prompt box logic

The code to implement the search box prompt box logic is as follows:

<?php
$keyword = $_GET[&#39;keyword&#39;];
if ($keyword) {
    $result = query("SELECT name FROM products WHERE name LIKE &#39;%$keyword%&#39; LIMIT 5");
    $data = array();
    foreach ($result as $row) {
        $data[] = $row[&#39;name&#39;];
    }
    echo json_encode($data);
}
?>

Copy after login

The above code performs the following operations:

Get the search keyword from the GET request.
Query the top 5 product names matching the keyword in the database and save the results in the $data array.
Encode the data into JSON format and return it to the client.
Write client code

The client code to implement the search box prompt box display is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP 搜索框提示框实例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="search-box" placeholder="请输入搜索关键字">
    <div id="search-result"></div>
    <script>
        $(document).ready(function() {
            $('#search-box').keyup(function() {
                var keyword = $(this).val();
                $.ajax({
                    url: 'search.php',
                    type: 'GET',
                    dataType: 'json',
                    data: {keyword: keyword},
                    success: function(data) {
                        var html = '';
                        for (var i = 0; i < data.length; i++) {
                            html += &#39;<div>' + data[i] + '</div>';
                        }
                        $('#search-result').html(html);
                    },
                    error: function() {
                        $('#search-result').html('无法获取数据！');
                    }
                });
            });
        });
    </script>
</body>
</html>

Copy after login

The above code is executed Do as follows:

Listen to the search box input event.
Get the search box to enter keywords and send an AJAX request to search.php.
Display the data returned by AJAX in the search prompt box.

3. Summary

Through the above steps, we successfully implemented a search box prompt box function. The user enters keywords in the search box, and the webpage sends the keywords to the server through AJAX technology. The server queries the database based on the keywords and returns the matching results to the webpage. Finally, the results are displayed under the search box in the form of a search prompt box, realizing Excellent user search experience. We can flexibly modify this specific implementation method according to actual needs to achieve the best results.

The above is the detailed content of How to implement a search prompt box using php. For more information, please follow other related articles on the PHP Chinese website!