Heim > Artikel > Backend-Entwicklung > So implementieren Sie die automatische Vervollständigungsfunktion des Suchfelds in PHP

So implementieren Sie die automatische Vervollständigungsfunktion des Suchfelds in PHP

PHPzOriginal: 2024-03-07 08:00:121110Durchsuche

Die automatische Vervollständigung von Suchfeldern ist eine gängige Webfunktion, die die Benutzererfahrung verbessert und den Suchvorgang vereinfacht. Die Funktion zur automatischen Vervollständigung des Suchfelds in PHP kann durch asynchrone Ajax-Anfragen implementiert werden. Im Folgenden wird die spezifische Implementierungsmethode vorgestellt, einschließlich Front-End-Code- und Back-End-Code-Beispielen.

Front-End-Codebeispiel:

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

Back-End-PHP-Codebeispiel:

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

?>

Im obigen Codebeispiel verwendet das Front-End jQuery, um eine Ajax-Anfrage zu implementieren, wenn Schlüsselwörter in das Suchfeld eingegeben werden, und das Back-End verwendet jQuery, um eine Ajax-Anfrage zu implementieren, wenn Schlüsselwörter in das Suchfeld eingegeben werden. Ende PHP verwendet die empfangenen Schlüsselwortdaten. Führen Sie einen Fuzzy-Matching durch und geben Sie eine Liste übereinstimmender Schlüsselwörter zurück, die schließlich auf der Seite angezeigt werden, wodurch die automatische Vervollständigungsfunktion des Suchfelds realisiert wird. Wenn Benutzer Suchschlüsselwörter eingeben, werden in Echtzeit passende Eingabeaufforderungen für Schlüsselwörter angezeigt, wodurch die Genauigkeit und Effizienz der Suche verbessert wird.

Ich hoffe, dass die oben bereitgestellten Methoden und Codebeispiele zur Implementierung der automatischen Vervollständigungsfunktion des Suchfelds über PHP Ihnen bei der Implementierung dieser Funktion helfen und das Benutzererlebnis der Website-Suche verbessern können.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die automatische Vervollständigungsfunktion des Suchfelds in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery ajax 异步

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in die Schritte zur Installation von PHP und MySQL auf Red HatNächster Artikel：Detaillierte Einführung in die Schritte zur Installation von PHP und MySQL auf Red Hat

In Verbindung stehende Artikel

Mehr sehen