PHP实现类似百度搜索自动完成(代码简单)

一、效果图:

二、HTML代码

<html lang="en">
<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: availableTagssource: "at.php"});});</script>
</head>
<body><div class="ui-widget"><label for="tags">标签：</label><input id="tags" name="tags" >
</div></body>
</html>

三、PHP代码

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

备注：HTML部分引入的css,js源代码:

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

文章参考：http://www.365mini.com/page/jquery-ui-autocomplete.htm

更多功能可参考： http://www.runoob.com/jqueryui/example-autocomplete.html

如果js和css源代码地址找不到，到这里下载

总结：以上是结合mysql 和 jquery-ui实现的自动提示，实际上如果数据库数据量较大的情况，整体对数据库开销也比较大。

这样，也可以尝试使用全文检索工具 xunsearch 或 sphinx 来实现。好处是减少了mysql数据库的查询压力，提高了检索速度。

xunSearch的使用：https://blog.csdn.net/m_nanle_xiaobudiu/article/details/81663636

PHP实现类似百度搜索自动完成(代码简单)相关推荐

技术揭秘！百度搜索中台低代码的探索与实践
导读:据Gartner调研,应用开发需求的市场增长至少超过IT交付能力的5倍,预计到2025年,70%的新应用开发将使用低代码技术.我们需要在需求迭代越来越高频.创新能力要求越来越高的背景下,探索如何 ...
类似百度输入框自动完成
1.前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputAu ...
vue实现搜索框搜索新增_基于Vue el-autocomplete 实现类似百度搜索框功能_含真_前端开发者...
效果图如下所示: 首先上代码让数据触手可及 class="inline-input search-input" v-model="searchContent" ...
百度搜索自动补全（百度搜索常见api）
一.百度搜索常用api 百度搜索常用api 一.搜索关键字自动补全 (一)数据源 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词 ...
Android AutoCompleteTextView控件实现类似百度搜索提示，限制输入数字长度
Android AutoCompleteTextView 控件实现类似被搜索提示,效果如下 1.首先贴出布局代码 activity_main.xml: <?xml version="1 ...
js 获取百度搜索关键词的代码
有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script>function query ...
php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
怎么用百度搜索php网站,PHP简单获取网站百度搜索和搜狗搜索收录量的方法
本文实例讲述了PHP简单获取网站百度搜索和搜狗搜索收录量的方法.分享给大家供大家参考,具体如下: 获取网站百度搜索和搜狗搜索的收录量代码,可以用于获取网站域名在搜索引擎的收录数量,一直想找这个API但 ...
类似百度输入框自动联想功能遇到的问题:Opera浏览器不支持拼音输入法时的keyup事件
这个问题也许很多人都遇到过了,在百度能搜到很多遇到相同问题的人,但解决办法都是一个(下面是载自其他网页): [ 问题ZcT345站长站在开启输入法的情况下,三个浏览器的具体问题如下:ZcT345站长 ...

PHP实现类似百度搜索自动完成(代码简单)

一、效果图:

二、HTML代码

三、PHP代码

PHP实现类似百度搜索自动完成(代码简单)相关推荐

最新文章

热门文章