suchen

Heim >Backend-Entwicklung >PHP-Problem >So implementieren Sie eine Baidu-ähnliche Suchfunktion in PHP

So implementieren Sie eine Baidu-ähnliche Suchfunktion in PHP

藏色散人
藏色散人Original
2023-01-18 09:55:441972Durchsuche

So implementieren Sie eine Baidu-ähnliche Suchfunktion in PHP: 1. Erstellen Sie eine HTML-Datei und setzen Sie den JS-Code auf „$(function() {$( „#tags“ ).autocomplete({...})“ 2. Übergeben Sie PHP, um eine Verbindung zur Datenbank herzustellen und die Suchfunktion für Eingabefelder über die Methode „Funktionstest ($ Schlüsselwort) {...}“ zu implementieren. Die Betriebsumgebung dieses Tutorials: Windows 10-System, PHP Version 8.1, DELL G3-Computer.

Wie implementiert man die Baidu-Suchfunktion in PHP? So implementieren Sie eine Baidu-ähnliche Suchfunktion in PHP

PHP implementiert die automatische Vervollständigung der Baidu-Suche (einfacher Code). 

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
    <link rel="stylesheet" href="/public/AutoCom/jquery-ui.css">
    <script src="/public/AutoCom/jquery-1.91.js"></script>
    <script src="/public/AutoCom/jquery-ui.js"></script>
    <script>
        $(function() {
            $( "#tags" ).autocomplete({
                // source: availableTags
                source: "at.php"
            });
        });
    </script>
</head>
<body>
 
<div>
    <label for="tags">标签：</label>
    <input id="tags" name="tags" >
</div>
 
</body>
</html>

3. PHP-Code 

<?php
function test($keyword) 
{
    //连接数据库
    $dsn = "mysql:dbname=test;host=localhost;";
    $db = new PDO($dsn, &#39;root&#39;, &#39;root&#39;);
    //查询数据
    $result = $db->prepare("select title from article where title like :title");
    $result->execute(array(&#39;title&#39; => "%" . $keyword . "%"));
    $data = $result->fetchall(PDO::FETCH_ASSOC);
    //将二维数组转化为一维数组(自动补全插件要求的是一个一维数组)
    foreach ($data as $k => $v) {
        $datas[] = $v[&#39;title&#39;];
    }
    return $datas;
}
 
//获取输入框的内容
//注:jquery-ui的自动补全ajax 当我们输入一个c时，Autocomplete实际发送的请求路径为at.php?term=c
$keyword = $_GET[&#39;term&#39;];
 
//根据用户输入值查询相关数据
$data = test($keyword);
//输出json字符串
echo json_encode($data); //输出查询的结果（json格式输出）
 
?>

Bemerkungen: CSS- und JS-Quellcode im HTML-Teil eingeführt: 

<!-- 引入jQuery UI的css文件 -->
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
<!-- 引入jQuery的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>

Artikelreferenz: http://www.365mini.com/page/jquery-ui -autocomplete.htmSo implementieren Sie eine Baidu-ähnliche Suchfunktion in PHP

Weitere Funktionen finden Sie unter: http://www.runoob.com/jqueryui/example-autocomplete.html

Zusammenfassung: Das Obige ist eine automatische Eingabeaufforderung, die durch die Kombination von MySQL und JQuery-UI implementiert wird. Wenn das Datenbankdatenvolumen groß ist, ist der gesamte Datenbankaufwand relativ groß. Auf diese Weise können Sie auch versuchen, das Volltextsuchtool xunsearch oder sphinx zu verwenden Druck auf die MySQL-Datenbank und verbessert die Abrufgeschwindigkeit.

Empfohlenes Lernen: „

PHP-Video. Tutorial

》

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Baidu-ähnliche Suchfunktion in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql jquery css html JS function 数据库 http sphinx ui
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：Was soll ich tun, wenn PHP Englisch schreiben kann, aber kein Chinesisch?Nächster Artikel：Was soll ich tun, wenn PHP Englisch schreiben kann, aber kein Chinesisch?

In Verbindung stehende Artikel

Mehr sehen