PHP+jQuery实现自动补全功能源码


Posted in PHP onMay 15, 2013

前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。由于项目很多地方要用到这个功能,所以需要用心做一下。发现select2这个插件的功能可以满足当前需求。

在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回。可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效。

后来发现,select2插件在实现选中时是以数据中的id字段为准的。所以不管是json还是jsonp,ajax返回的数据都必须拥有id字段。如果实际数据库中不存在这样的id,也可以人为构造一个,但是要保证id的唯一性。

这里列出模板文件try_diy.tpl的源码
其中colum输入框是插件作用的地方,但其返回的值是id,当页面提交后我们需要把用户选择的版块重新呈现给用户,我的做法是根据表单提交的id查询对应的版面名称name,当控制器收到id值且非空的时候,把版块id对应的名称name值同时呈现到页面上显示出来。由于select2插件是把name名称放在构造的<div id="s2id_colum"></div>内层的span元素中,所以我会在查询结果页面加载后把隐藏域的name值写到span元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> 
<link href="./static/js/select2-3.3.2/select2.css" rel="stylesheet"/> 
<script src="./static/js/select2-3.3.2/select2.js"></script> 
</head> 
<body> 
<form name="frm" id="frm" autocomplete="off" action="" method="post" > 
<input name="c" type="hidden" value="try"/> 
<input name="a" type="hidden" value="diy"/> 
<label>飞流产品版块 (Ajax调用远程数据):</label> 
<input type="hidden" class="bigdrop" id="colum" name="colum" style="width:600px" value=""/> 
<input type="hidden" id="columname" value="<{$frmname}>" name="columname" /> 
<p>版块ID:<{$frmid}></p> </form> 
<script> 
$(document).ready(function() { 
$('#colum').select2({ 
minimumInputLength: 0, 
placeholder: '选择版块', 
ajax: { 
url: "http://pm.feiliu.com/?c=try&a=ajax_diy",<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">//</SPAN><SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> 提供jsonp请求的url地址</SPAN> 
            dataType: 'jsonp', 
            jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名(一般默认为:callback,故可省略) 
            //jsonpCallback:"testback", 
            //jsonpCallback是自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可写"?",jQuery会自动处理数据 
quietMillis: 100, 
data: function(name, page) { 
return { 
types: ["exercise"], 
limit: -1, 
q: name 
}; 
}, 
results: function(data, page ) { 
return { results: data.items } 
} 
}, 
formatResult: function(exercise) { 
return "<div class='select2-user-result'>" + exercise.name + "</div>"; 
}, 
formatSelection: function(exercise) { 
return exercise.name; 
} 
}); 
$('#colum').change(function(){ 
frm.submit(); 
}); 
var name = $("#columname").val(); 
if(name){ 
$("#s2id_colum").find("span").text(name); 
} 
}); 
</script> 
</body> 
</html>

下面是控制器的例子:
class pmc_try 
{ 
public function diy(){ 
if($_POST['colum']) 
{ 
$fid = $_POST['colum']; 
$fname = mod_forum::get_forum_name_by_fid($fid);//根据id取name 
pm_tpl::assign('frmid',$fid); 
pm_tpl::assign('frmname',$fname); 
pm_tpl::display("try_diy"); 
}else 
{ 
pm_tpl::display("try_diy"); 
} 
} 
public function ajax_diy(){ 
$fid = $_GET['q']; 
$callback = $_GET["callback"]; //默认函数名为callback 
$forums = mod_forum::get_ajx_forum_by_tpid($fid); 
$total = count($forums); 
$result = array( 
'total'=>$total, 
'items'=>$forums 
); 
$output = json_encode($result); 
echo $callback.'('.$output.')';//构造jonsp 
exit(); 
} 
} 
?>

model方法:
public static function get_forum_name_by_fid($fid) 
{ 
$sql = "SELECT name FROM sq_forums WHERE fid='$fid' ORDER BY threads_counter DESC"; 
$data = pm_db11::result_first($sql); 
return $data; 
} 
public static function get_ajx_forum_by_tpid($tpid, $fid) 
{ 
//产品ID:tpid,版块ID:fid 
$data = array(); 
if($tpid && $fid){//构造一个id字段,也可以通过对查询结果加工构造 
$sql = "SELECT fid AS id,fid,name FROM sq_forums WHERE tpid='$tpid' AND name LIKE N'%$fid%' ORDER BY threads_counter DESC"; 
$query = pm_db11::query($sql); 
$data = pm_db11::fetch_all($query); 
} 
return $data; 
}

补充一下,实际使用为突出提示效果,可以高亮显示name中包含的查询关键字,这一点可以再select2的formatResult函数中处理,也可以在php中进行加工处理。这一点 的源码我这里就不写了。
补充参考http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
PHP 相关文章推荐
PHP调用三种数据库的方法(3)
Oct 09 PHP
php实现mysql数据库备份类
Mar 20 PHP
PHP正确配置mysql(apache环境)
Aug 28 PHP
解析php中获取url与物理路径的总结
Jun 21 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
Jul 28 PHP
PHP的Socket网络编程入门指引
Aug 11 PHP
PHP设置images目录不充许http访问的方法
Nov 01 PHP
php微信公众平台示例代码分析(二)
Dec 06 PHP
php使用ftp实现文件上传与下载功能
Jul 21 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
Aug 01 PHP
laravel5实现微信第三方登录功能
Dec 06 PHP
Laravel框架实现即点即改功能的方法分析
Oct 31 PHP
深入分析php之面向对象
May 15 #PHP
深入解析php之apc
May 15 #PHP
深入解析php之sphinx
May 15 #PHP
基于php设计模式中单例模式的应用分析
May 15 #PHP
基于php设计模式中工厂模式详细介绍
May 15 #PHP
php笔记之:数据类型与常量的使用分析
May 14 #PHP
PHP笔记之:基于面向对象设计的详解
May 14 #PHP
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python使用mysql的两种使用方式
2018/03/07 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python增加图像对比度的方法
2019/07/12 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
幼儿园安全责任书
2014/04/14 职场文书
会计实训报告范文
2014/11/04 职场文书
师德先进个人材料
2014/12/20 职场文书
离婚代理词范文
2015/05/23 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android