bigautocomplete的用法（包括后台数据的交互）模仿百度搜索样式

一，没有与后台进行交互

首先要将bigautocomplete加载进来

[html]  view plain  copy

 print ?

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

其次，写对应的文本框，

[html]  view plain  copy

 print ?

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

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

二，与后台进行交互

首先要将bigautocomplete加载进来

[html]  view plain  copy

 print ?

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

[html]  view plain  copy

 print ?

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

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

[html]  view plain  copy

 print ?

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