Bagaimana untuk melaksanakan kotak gesaan carian menggunakan php-masalah PHP-php.cn

Bagaimana untuk melaksanakan kotak gesaan carian menggunakan php

PHPz

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

asal

1681 orang telah melayarinya

Di tapak web moden, kotak carian yang berguna amat diperlukan. Ciri ini boleh memudahkan proses carian pengguna dan meningkatkan pengalaman pengguna tapak web. Menambah kotak gesaan di sebelah kotak carian membawa kecekapan carian pengguna ke tahap yang baharu. Jadi, artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi kotak gesaan kotak carian.

1. Prinsip pelaksanaan

Dalam proses melaksanakan kotak gesaan carian dalam PHP, kita perlu menggunakan teknologi AJAX. Ia terbahagi terutamanya kepada langkah-langkah berikut:

Pengguna memasukkan kata kunci carian dalam kotak carian.
Hantar kata kunci ke skrip PHP sebelah pelayan.
Di bahagian pelayan, hasil carian yang berkaitan dengan kata kunci diperoleh dengan menanyakan pangkalan data atau sumber data lain.
Ingkapsulkan hasil carian ke dalam format data JSON dan kembalikan kepada pelanggan.
Selepas menerima data yang dikembalikan oleh pelayan, pelanggan menggunakan JavaScript untuk memaparkannya di bawah kotak carian untuk membentuk kotak gesaan carian.

2. Langkah-langkah pelaksanaan

Buat jadual pangkalan data

Kami mula-mula mencipta jadual bernama products Jadual produk mengandungi medan berikut:

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

Salin selepas log masuk

Menulis fungsi pertanyaan pangkalan data

Kita perlu menulis fungsi query() untuk menyambung ke pangkalan data dan melaksanakan pertanyaan, mengembalikan tatasusunan hasil . Contohnya adalah seperti berikut:

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

Salin selepas log masuk

Menulis logik kotak gesaan carian

Kod untuk melaksanakan logik kotak gesaan kotak carian adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas Laksanakan operasi berikut:

Dapatkan kata kunci carian daripada permintaan GET.
Soal 5 nama produk teratas yang sepadan dengan kata kunci dalam pangkalan data dan simpan hasilnya dalam tatasusunan $data.
Ekodkan data ke dalam format JSON dan kembalikan kepada klien.
Tulis kod pelanggan

Kod pelanggan untuk melaksanakan paparan kotak gesaan kotak carian adalah seperti berikut:

<!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>

Salin selepas log masuk

Di atas Kod melakukan operasi berikut:

Dengar acara input kotak carian.
Mendapat kotak carian untuk memasukkan kata kunci dan menghantar permintaan AJAX ke search.php.
Paparkan data yang dikembalikan oleh AJAX dalam kotak gesaan carian.

3. Ringkasan

Melalui langkah di atas, kami berjaya melaksanakan fungsi kotak gesaan kotak carian. Pengguna memasukkan kata kunci dalam kotak carian, dan halaman web menghantar kata kunci ke pelayan melalui teknologi AJAX Pelayan menanyakan pangkalan data berdasarkan kata kunci dan mengembalikan hasil yang sepadan ke halaman web Akhirnya, keputusan dipaparkan di bawah kotak carian dalam bentuk kotak gesaan carian, merealisasikan pengalaman carian pengguna Cemerlang. Kami boleh mengubah suai kaedah pelaksanaan khusus ini secara fleksibel mengikut keperluan sebenar untuk mencapai hasil yang terbaik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak gesaan carian menggunakan php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!