jquery autocomplete和thinkphp开发 - Thinkphp

jquery autocomplete和thinkphp开发

发现网上jquery autocomplete的帖子说的内容都很旧,很多参数不符合Jquery UI中的参数,在这里给出一个Thinkphp和Mysql开发的例子,希望对于大家有帮助,开发环境:jquery 1.7.2,最新版的Jquery UI,thinkphp2.2版本.

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

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

首先模板部分代码:

1）HTML代码

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

这里的关键是:id="key"

2）JS代码

<link href= "/Public/Js/Jquery/ui/jquery.ui.autocomplete.css"  type= "text/css"  rel= "stylesheet" >       <load href= "__PUBLIC__/Js/Jquery/ui/jquery171.min.js"  />       <load href= "__PUBLIC__/Js/Jquery/ui/jquery.ui.core.js"  />       <load href= "__PUBLIC__/Js/Jquery/ui/jquery.ui.widget.js"  />       <load href= "__PUBLIC__/Js/Jquery/ui/jquery.ui.position.js"  />       <load href= "__PUBLIC__/Js/Jquery/ui/jquery.ui.autocomplete.js"  />       <script type= "text/javascript" >       $( function (){             $( "#key" ).autocomplete({                   source:  "__URL__/searchtuiurl" ,                   minLength: 1,                   autoFocus:  true ,              });        });       </script> 

这里的关键是:对ID为Key的控件,绑定autocomplete方法,并且指出控件的数据源是来自于PHP程序方法

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

3）PHP代码

public   function  searchtuiurl(){              $Tuiurl =M( 'Tuiurl' );              $list = $Tuiurl ->where( array ( 'qijiandian' => array ( 'like' , '%' .trim( $_GET [ 'term' ]). '%' )))->select();             foreach  ( $list   as   $value )             {                      $result [] =  array (                      'label'  =>  $value [ 'qijiandian' ],                      'value'  =>  $value [ 'tuiurl' ]                      );                 }               echo  json_encode( $result );           }    //Jquery UI AutoComplete提供数据用于自动产生推荐URL  

这里的注意点比较多,共四条

1）你在输入框输入的字,传入Autocomplete时,格式是$_GET['term'])

2）Lable表示提示出的内容,Value表示选中后,输入框出现的内容     

3）如果你只提供Lable或Value,那么系统就默认Lable和Value的值是一样的

4）最后返回值要用json_encode编码.

查看更多关于jquery autocomplete和thinkphp开发 - Thinkphp的详细内容...