PHPで検索ボックスの自動補完機能を実装する方法-PHPチュートリアル-php.cn

PHPで検索ボックスの自動補完機能を実装する方法

PHPz

リリース： 2024-03-07 08:02:02

オリジナル

1140 人が閲覧しました

PHPで検索ボックスの自動補完機能を実装する方法

検索ボックスのオートコンプリートは、ユーザーエクスペリエンスを向上させ、検索プロセスを簡素化する一般的な Web 機能です。 PHP の検索ボックスのオートコンプリート機能は、Ajax 非同期リクエストを通じて実装できます。以下にフロントエンドコード、バックエンドコード例を交えて具体的な実装方法を紹介します。

フロントエンドコード例:

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

ログイン後にコピー

バックエンド PHP コード例:

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

?>

ログイン後にコピー

上記のコード例では、フロントエンドは入力時に jQuery を使用して Ajax を実装します。検索ボックス内のキーワードをリクエストすると、バックエンドPHPが受け取ったキーワードデータを基にあいまいマッチングを実行し、一致したキーワードのリストを返し、最終的にページ上に表示することで、検索ボックスの自動補完機能を実現します。ユーザーが検索キーワードを入力すると、一致するキーワードのプロンプトがリアルタイムに表示され、検索の精度と効率が向上します。

PHP で検索ボックスの自動補完機能を実装するための上記の方法とコード例を通じて、この機能を実装し、Web サイト検索のユーザーエクスペリエンスを向上させるのに役立つことを願っています。

以上がPHPで検索ボックスの自動補完機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。