Home > Article > Backend Development > How to implement search function similar to Baidu in php

How to implement search function similar to Baidu in php

藏色散人Original: 2023-01-18 09:55:441883browse

How to implement a search function similar to Baidu in php: 1. Create an HTML file and set the js code to "$(function() {$( "#tags" ).autocomplete({...})" ;2. Connect to the database through php and implement the input box search function through the "function test($keyword) {...}" method.

The operating environment of this tutorial: Windows 10 system, PHP version 8.1, DELL G3 computer

How to implement similar Baidu search function in PHP?

PHP implements automatic completion similar to Baidu search( The code is simple)

1. Rendering:

How to implement search function similar to Baidu in php

##2. HTML 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格式输出）
 
?>

Note: css and js source code introduced in the HTML part:

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

Article reference: http://www.365mini.com/page/jquery-ui-autocomplete.htm

For more functions, please refer to: http://www.runoob.com/jqueryui/example-autocomplete. html

Summary: The above is an automatic prompt implemented by combining mysql and jquery-ui. In fact, if the database data volume is large, the overall database overhead will be relatively large.

In this way, it is also You can try to use the full-text search tool xunsearch or sphinx to achieve this. The advantage is that it reduces the query pressure on the mysql database and improves the retrieval speed.

Recommended learning: "

PHP Video Tutorial"

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

php mysql jquery css html JS function 数据库 http sphinx ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What should I do if php can write English but not Chinese?Next article：What should I do if php can write English but not Chinese?

See more

How to implement search function similar to Baidu in php

Related articles