当前位置:首页 > CMS教程 > Thinkphp > 列表

jquery autocomplete和thinkphp开发

发布:smiling 来源: PHP粉丝网  添加日期:2014-04-19 09:00:50 浏览: 评论:0 

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

分享到: