Comment implémenter une boîte d'invite de recherche en utilisant php

PHPz
Libérer: 2023-03-22 09:54:02
original
1677 Les gens l'ont consulté

Dans les sites Web modernes, un champ de recherche utile est indispensable. Cette fonctionnalité peut grandement simplifier le processus de recherche de l'utilisateur et améliorer l'expérience utilisateur du site Web. L'ajout d'une zone d'invite à côté du champ de recherche amène l'efficacité de la recherche de l'utilisateur à un nouveau niveau. Ainsi, cet article expliquera comment utiliser PHP pour implémenter une fonction de zone d'invite de champ de recherche.

1. Principe de mise en œuvre

Dans le processus d'implémentation de la boîte d'invite de recherche en PHP, nous devons utiliser la technologie AJAX. Il est principalement divisé selon les étapes suivantes :

  1. L'utilisateur saisit le mot-clé de recherche dans le champ de recherche.
  2. Envoyez des mots-clés aux scripts PHP côté serveur.
  3. Côté serveur, obtenez des résultats de recherche liés aux mots-clés en interrogeant la base de données ou d'autres sources de données.
  4. Encapsulez les résultats de la recherche au format de données JSON et renvoyez-les au client.
  5. Après avoir reçu les données renvoyées par le serveur, le client utilise JavaScript pour les afficher sous le champ de recherche afin de former une zone d'invite de recherche.

2. Étapes de mise en œuvre

  1. Créer une table de base de données

Nous créons d'abord une table de produits nommée products, qui contient les champs suivants : products 的商品表,包含以下字段:

id          int(11)         商品 ID
name        varchar(255)    商品名称
description text            商品描述
price       decimal(10,2)   商品价格
Copier après la connexion
  1. 编写数据库查询函数

我们需要编写一个 query() 函数去连接数据库并执行查询,返回结果数组。示例如下:

<?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);
}
?>
Copier après la connexion
  1. 编写搜索提示框逻辑

实现搜索框提示框逻辑的代码如下:

<?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);
}
?>
Copier après la connexion

以上代码执行如下操作:

  • 从 GET 请求中获取搜索关键字。

  • 查询数据库中与关键字匹配的前 5 个商品名称,并将结果保存在 $data 数组中。

  • 将数据编码成 JSON 格式并返回给客户端。

  • 编写客户端代码

实现搜索框提示框显示的客户端代码如下:

<!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>
Copier après la connexion

以上代码执行如下操作:

  • 监听搜索框输入事件。

  • 获取搜索框输入关键字并发送 AJAX 请求到 search.phprrreee

      Écrire la fonction de requête de base de données
  • Nous devons écrire une fonction query() pour nous connecter à la base de données et exécuter la requête, renvoyant le tableau de résultats. Un exemple est le suivant :

    rrreee
    1. Ecrire la logique de la boîte d'invite de recherche

    Le code pour implémenter la logique de la boîte d'invite de recherche est le suivant : rrreee

    Le code ci-dessus effectue les opérations suivantes :

      🎜Obtenez des mots-clés de recherche à partir de la requête GET. 🎜🎜🎜🎜Recherchez les 5 principaux noms de produits correspondant au mot-clé dans la base de données et enregistrez les résultats dans le tableau $data. 🎜🎜🎜🎜Encodez les données au format JSON et renvoyez-les au client. 🎜🎜🎜🎜Écrire le code client🎜🎜🎜🎜Le code client pour implémenter l'affichage de la boîte de recherche est le suivant : 🎜rrreee🎜Le code ci-dessus effectue les opérations suivantes : 🎜
        🎜 🎜Écoutez les événements de saisie du champ de recherche. 🎜🎜🎜🎜Obtenez le champ de recherche pour saisir des mots-clés et envoyer des requêtes AJAX à search.php. 🎜🎜🎜🎜Affichez les données renvoyées par AJAX dans la zone d'invite de recherche. 🎜🎜🎜🎜🎜 3. Résumé🎜🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès une fonction de zone d'invite de champ de recherche. L'utilisateur saisit des mots-clés dans le champ de recherche et la page Web envoie les mots-clés au serveur via la technologie AJAX. Le serveur interroge la base de données en fonction des mots-clés et renvoie les résultats correspondants à la page Web. sous la forme d'une boîte d'invite de recherche, réalisant une excellente expérience de recherche utilisateur. Nous pouvons modifier de manière flexible cette méthode de mise en œuvre spécifique en fonction des besoins réels pour obtenir les meilleurs résultats. 🎜

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Étiquettes associées:
    php
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal