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 相关文章推荐
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
Oct 12 PHP
rrmdir php中递归删除目录及目录下的文件
May 15 PHP
Linux编译升级php的详细方法
Nov 04 PHP
PHP中$_FILES的使用方法及注意事项说明
Feb 14 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
Jun 21 PHP
PHP输出日历表代码实例
Mar 27 PHP
php实现的简单日志写入函数
Mar 31 PHP
详解PHP的Yii框架中的Controller控制器
Mar 29 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
Apr 01 PHP
PHP实现的多进程控制demo示例
Jul 22 PHP
Laravel修改验证提示信息为中文的示例
Oct 23 PHP
php7 list()、session及其他模块的修改实例分析
May 25 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
在php中取得image按钮传递的name值
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
实例讲解React 组件
2020/07/07 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
python中dir函数用法分析
2015/04/17 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python实战购物车项目的实现参考
2019/02/20 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
2019年.net常见面试问题
2012/02/12 面试题
综治目标管理责任书
2015/05/11 职场文书
生活小常识广播稿
2015/08/19 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python