Bagaimana untuk melaksanakan fungsi penyiapan automatik kotak carian dalam PHP-tutorial php-php.cn

Bagaimana untuk melaksanakan fungsi penyiapan automatik kotak carian dalam PHP

PHPz

Lepaskan： 2024-03-07 08:02:02

asal

1108 orang telah melayarinya

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>

Salin selepas log masuk

/* styles.css */

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

Salin selepas log masuk

// 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();
        }
    });
});

Salin selepas log masuk

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

?>

Salin selepas log masuk

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!