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 相关文章推荐
删除无限级目录与文件代码共享
Jul 12 PHP
PHP中创建并处理图象
Oct 09 PHP
在PHP里得到前天和昨天的日期的代码
Aug 16 PHP
PHP数据流应用的一个简单实例
Sep 14 PHP
50个PHP程序性能优化的方法
Jun 02 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
Jun 19 PHP
PHP中使用json数据格式定义字面量对象的方法
Aug 20 PHP
php修改上传图片尺寸的方法
Apr 14 PHP
PHP中new static()与new self()的比较
Aug 19 PHP
thinkPHP5 tablib标签库自定义方法详解
May 10 PHP
Thinkphp5 自定义上传文件名的实现方法
Jul 23 PHP
PHP数组实际占用内存大小原理解析
Dec 11 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP 彩色文字实现代码
2009/06/29 PHP
PHP 柱状图实现代码
2009/12/04 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
node.js如何操作MySQL数据库
2020/10/29 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python开发入门——set的使用
2020/09/03 Python
python中使用np.delete()的实例方法
2021/02/01 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
旅游专业职业生涯规划范文
2014/01/13 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
商业项目策划方案
2014/06/05 职场文书
公司年底活动方案
2014/08/17 职场文书
大学生简短的自我评价
2014/09/12 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
爱心捐款活动总结
2015/05/09 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS