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 和 MySQL 基础教程(三)
Oct 09 PHP
PHP 数组入门教程小结
May 20 PHP
php microtime获取浮点的时间戳
Feb 21 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
Apr 28 PHP
php用数组返回无限分类的列表数据的代码
Aug 08 PHP
利用PHP扩展vld查看PHP opcode操作步骤
Mar 04 PHP
探讨捕获php错误信息方法的详解
Jun 09 PHP
php生成4位数字验证码的实现代码
Nov 23 PHP
smarty高级特性之过滤器的使用方法
Dec 25 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
Jul 19 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
Jun 16 PHP
解决windows上php xdebug 无法调试的问题
Feb 19 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python学生管理系统开发
2019/01/30 Python
python__name__原理及用法详解
2019/11/02 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
上诉状格式
2015/05/23 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸