php搜索框自动提示 (类似百度) 内容自动补全 (附demo)

原创 木鱼  2017-06-15 07:30  阅读 293 次

 

搜索引擎大家都在用,Google、百度、搜狗、bing; 这些搜索引擎,为了加强用户的体验效果,会在用户输入文字时,自动在搜索框下方提示相关内容,这种效果确实很棒。下面就说一下实现的流程吧

先上个效果图,毕竟无图xx

php搜索框自动提示 (类似百度) 内容自动补全 (附demo) PHP 第1张


实现流程

所有需要用到的文件会放在文章末尾的demo中


首先需要引入Autocomplete文件  (需要Jquery支持)

<link rel="stylesheet" href="./css/jquery.ui.autocomplete.css">
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.ui.core.js"></script>
<script type="text/javascript" src="./js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="./js/jquery.ui.position.js"></script>
<script type="text/javascript" src="./js/jquery.ui.autocomplete.js"></script>

然后再来一个输入框

<input type="text" class="prompt" placeholder="请输入您想要搜索的内容" name="">

把自动检索的方法加到引入js文件的下面位置

// 添加自动补充检索
$(".prompt").autocomplete({
	source: "./data.php",        // 这是后台文件, 实现动态提示搜索信息
	minLength: 1
});

data.php后台返回代码

这里需要注意一下json的返回格式,Autocomplete默认使用GET方法传参,参数名term

// 这里做演示,用的是静态数据,如果用到项目的话,自然会用到数据库动态查询然后组合返回~

if (!empty($content = $_GET['term'])) {

	// 小测试
	// 返回json格式参考: [{"label":"http://www.m5yu.com"},{"label":"\u6728\u9c7c\u535a\u5ba2"}]
	switch ($content) {
		case '木鱼':
			$result[] = array('label' => 'http://www.m5yu.com');
			$result[] = array('label' => '木鱼博客');
			break;
		
		default:
			$result[] = array('label' => '没有查询到相关内容');
			break;
	}

	echo json_encode($result);

}

 php搜索框自动提示 (类似百度) 内容自动补全 (附demo) PHP 第2张

 

到这里就完成了,文章末尾会有代码demo供参考,写文章不容易php搜索框自动提示 (类似百度) 内容自动补全 (附demo) PHP 第3张,不求赞赏,只求评论一下点个赞,能转发顺便转发一下就更好了! php搜索框自动提示 (类似百度) 内容自动补全 (附demo) PHP 第4张

  

插件还有其他很多参数,有兴趣的可以自己研究研究!


下载地址

点击下载  密码: rqjd

本文地址:https://www.m5yu.com/php-search-auto-complete.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:木鱼博客
版权声明:本文为原创文章,版权归 木鱼 所有,欢迎分享本文,转载请保留出处!

发表评论