bigautocomplete的用法（包括后台数据的交互）模仿百度搜索样式-优快云博客

一，没有与后台进行交互

首先要将bigautocomplete加载进来

[html]view plaincopy 
   
print?
 <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>  

其次，写对应的文本框，

[html]view plaincopy 
   
print?
 <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加载进来

[html]view plaincopy 
   
print?
 <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">其次，写对应的文本框，  

[html]view plaincopy 
   
print?
 <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中的内容吧

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