发现网上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编码.

Tags: jquery autocomplete thinkphp

分享到：