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 session安全问题分析
Jun 24 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
Oct 23 PHP
Destoon模板制作简明教程
Jun 20 PHP
PHP会话控制:Session与Cookie详解
Sep 27 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
Dec 17 PHP
php获取YouTube视频信息的方法
Feb 11 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
Jun 10 PHP
php实现的递归提成方案实例
Nov 14 PHP
PHP微信支付实例解析
Jul 22 PHP
php连接MSsql server的五种方法总结
Mar 04 PHP
PHP join()函数用法与实例讲解
Mar 11 PHP
thinkphp5实现微信扫码支付
Dec 23 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字符串的编码问题的详细介绍
2013/04/27 PHP
探讨php中header的用法详解
2013/06/07 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
基于php实现的验证码小程序
2016/12/13 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
js获取ip和地区
2017/03/10 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python实现串口自动触发工作的示例
2019/07/02 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python如何绘制疫情图
2020/09/16 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
学生会主席就职演讲稿
2014/01/14 职场文书
结婚保证书范文
2014/04/29 职场文书
立春观后感
2015/06/18 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python