發現網上jquery autocomplete的帖子說的內容都很舊,很多參數不符合Jquery UI中的參數,在這里給出一個Thinkphp和Mysql開發的例子,希望對于大家有幫助,開發環境:jquery 1.7.2,最新版的Jquery UI,thinkphp2.2版本.

另外提一下,autocomplete插件在firefox上有一個輸入BUG,輸入后并不能提示,需要向前空格再退格才有提示,解決方法是,在133行(不同版本可能會有行差)中加入如下代碼:

1. .bind("input.autocomplete",function(){ 
2.            //修復FF不支持中文bug 
3.            self.search(self.item); 
4. }); 

首先模板部分代碼:

1）HTML代碼

1. <input type="text"  name="shoptuiurl"  id="key" class="maintaintextfield"> 

這里的關鍵是:id="key"

2）JS代碼

1. <link href="/Public/Js/Jquery/ui/jquery.ui.autocomplete.css" type="text/css" rel="stylesheet"> 
2.      <load href="__PUBLIC__/Js/Jquery/ui/jquery171.min.js" /> 
3.      <load href="__PUBLIC__/Js/Jquery/ui/jquery.ui.core.js" /> 
4.      <load href="__PUBLIC__/Js/Jquery/ui/jquery.ui.widget.js" /> 
5.      <load href="__PUBLIC__/Js/Jquery/ui/jquery.ui.position.js" /> 
6.      <load href="__PUBLIC__/Js/Jquery/ui/jquery.ui.autocomplete.js" /> 
7.      <script type="text/javascript"> 
8.      $(function(){ 
9.            $("#key").autocomplete({ 
10.                  source: "__URL__/searchtuiurl", 
11.                  minLength: 1, 
12.                  autoFocus: true, 
13.             }); 
14.       }); 
15.      </script> 

這里的關鍵是:對ID為Key的控件,綁定autocomplete方法,并且指出控件的數據源是來自于PHP程序方法

searchtuiurl的返回值（這里的返回值是JSON格式）

3）PHP代碼

1. public function searchtuiurl(){  
2.           $Tuiurl=M('Tuiurl');  
3.           $list=$Tuiurl->where(array('qijiandian'=>array('like','%'.trim($_GET['term']).'%')))->select(); 
4.           foreach ($list as $value) 
5.            { 
6.                    $result[] = array( 
7.                    'label' => $value['qijiandian'], 
8.                    'value' => $value['tuiurl'] 
9.                     );     
10.            }  
11.            echo json_encode($result);    
12.       }   //Jquery UI AutoComplete提供數據用于自動產生推薦URL 

這里的注意點比較多,共四條

1）你在輸入框輸入的字,傳入Autocomplete時,格式是$_GET['term'])

2）Lable表示提示出的內容,Value表示選中后,輸入框出現的內容     

3）如果你只提供Lable或Value,那么系統就默認Lable和Value的值是一樣的

4）最后返回值要用json_encode編碼.