How to implement automatic completion function of search box in PHP-PHP Tutorial-php.cn

How to implement automatic completion function of search box in PHP

PHPz

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

Original

1140 people have browsed it

How to implement automatic completion function of search box in PHP

Search box autocomplete is a common web feature that improves the user experience and simplifies the search process. The search box auto-completion function in PHP can be implemented through Ajax asynchronous requests. The specific implementation method will be introduced below, including front-end code and back-end code examples.

Front-end code example:

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

Copy after login

/* styles.css */

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

Copy after login

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

Copy after login

Back-end PHP code example:

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

?>

Copy after login

In the above code example, the front-end uses jQuery to implement Ajax when entering keywords in the search box Request, back-end PHP performs fuzzy matching based on the received keyword data, and returns a list of matching keywords, which are finally displayed on the page, realizing the automatic completion function of the search box. When users enter search keywords, matching keyword prompts will appear in real time, improving the accuracy and efficiency of search.

Through the methods and code examples provided above for implementing the automatic completion function of the search box in PHP, I hope it can help you implement this function and improve the user experience of website search.

The above is the detailed content of How to implement automatic completion function of search box in PHP. For more information, please follow other related articles on the PHP Chinese website!