Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Bagaimana untuk melaksanakan fungsi penyiapan automatik kotak carian dalam PHP

Bagaimana untuk melaksanakan fungsi penyiapan automatik kotak carian dalam PHP

PHPz
PHPzasal
2024-03-07 08:00:121115semak imbas

Bagaimana untuk melaksanakan fungsi penyiapan automatik kotak carian dalam PHP

Autolengkap kotak carian ialah ciri web biasa yang meningkatkan pengalaman pengguna dan memudahkan proses carian. Fungsi pelengkapan automatik kotak carian dalam PHP boleh dilaksanakan melalui permintaan tak segerak Ajax. Kaedah pelaksanaan khusus akan diperkenalkan di bawah, termasuk contoh kod hadapan dan kod belakang.

Contoh kod bahagian hadapan:

<!-- index.html -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>搜索框自动补全</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>搜索框自动补全示例</h1>

<input type="text" id="search" placeholder="输入关键词搜索">

<div id="suggestions">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/* styles.css */

#suggestions {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    max-width: 300px;
}
// script.js

$(document).ready(function(){
    $('#search').keyup(function(){
        var keyword = $(this).val();
        if(keyword != ''){
            $.ajax({
                url: 'autocomplete.php',
                type: 'post',
                data: {keyword: keyword},
                success: function(response){
                    $('#suggestions').html(response);
                    $('#suggestions').show();
                }
            });
        } else {
            $('#suggestions').hide();
        }
    });
});

Contoh kod PHP belakang:

// autocomplete.php

<?php

$keywords = ['PHP', 'JavaScript', 'Python', 'HTML', 'CSS', 'MySQL', 'AJAX' ]; // 模拟关键词数据源

if(isset($_POST['keyword'])){
    $input = $_POST['keyword'];
    $suggestions = '';
    
    foreach($keywords as $word){
        if(stripos($word,$input) !== false){
            $suggestions .= '<div>' . $word . '</div>';
        }
    }
    
    echo $suggestions;
}

?>

Dalam contoh kod di atas, bahagian hadapan menggunakan jQuery untuk melaksanakan permintaan Ajax apabila memasukkan kata kunci dalam kotak carian, dan bahagian belakang- akhir PHP menggunakan data kata kunci yang diterima Lakukan pemadanan kabur dan kembalikan senarai kata kunci yang sepadan, yang akhirnya dipaparkan pada halaman, merealisasikan fungsi penyiapan automatik kotak carian. Apabila pengguna memasukkan kata kunci carian, gesaan kata kunci yang sepadan akan muncul dalam masa nyata, meningkatkan ketepatan dan kecekapan carian.

Kaedah dan contoh kod untuk melaksanakan fungsi penyiapan automatik kotak carian melalui PHP yang disediakan di atas, saya harap ia dapat membantu anda melaksanakan fungsi ini dan meningkatkan pengalaman pengguna carian laman web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penyiapan automatik kotak carian dalam PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn