bigautocomplete的用法（包括后台数据的交互）-CSDN博客

本文链接：https://blog.csdn.net/cyerogy/article/details/38899189

本文介绍如何利用Bigautocomplete插件实现类似百度搜索的自动补全功能，包括前后端交互方式，并提供具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期，有个任务是模仿百度搜索样式的，原来是自己想写一个的，怎料自己的js水平有点差，想了半天，还是没有什么思路，后来无意中发现了bigautocomplete，用研究了一下，还是很好用的，下面，来简要的讲讲他的用法吧

一，没有与后台进行交互

首先要将bigautocomplete加载进来

<span style="font-size:18px;"><link rel="stylesheet" href="../css/jquery.bigautocomplete.css" type="text/css" />//下拉框的样式
<script type="text/javascript" src="../js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="../js/jquery.bigautocomplete.js"></script>//引用bigautocomplete</span>

其次，写对应的文本框，

<span style="font-size:18px;"><input type="text" id="tt" style="width:300px;"/>
$(function(){
    $("#tt").bigAutocomplete({data:[{title:"book"},
                                    {title:"blue"},
                                    {title:"fool"},
                                    {title:"bus"}]});
})</span>

这样在文本框中输入b就会出现如图所示的效果

二，与后台进行交互

首先要将bigautocomplete加载进来

<span style="font-size:18px;"><link rel="stylesheet" href="../css/jquery.bigautocomplete.css" type="text/css" />//下拉框的样式
<script type="text/javascript" src="../js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="../js/jquery.bigautocomplete.js"></script>//引用bigautocomplete
<pre name="code" class="html">其次，写对应的文本框，

<span style="font-size:18px;"><input type="text" id="tt" value="" class="text" onkeyup="change()"/>//其中onkeyup表示，数据进行实时的查询
</span><pre name="code" class="html"><span style="font-size:18px;">function change(){
	 if($("#tt").val()==""){
		 return;
	 }
	 else{
		 $("#tt").bigAutocomplete({url:"index.php"});//url表示后台交互的链接，这里以index.php举例
	 }	 
 }</span>

最后，来看看index.php中的内容吧

$date = [{title:"book"},{title:"blue"},{title:"fool"},{title:"bus"}];
 echo '{"data":'.$date.'}';//前面的data是固定的，$date表示下拉框中的内容，但必须是json格式的，
exit;

这样你就能看到你要的效果了

源码链接http://pan.baidu.com/s/1i5sE8nz