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 相关文章推荐
E路文章系统PHP
Dec 11 PHP
自己前几天写的无限分类类
Feb 14 PHP
php 空格,换行,跳格使用说明
Dec 18 PHP
一步一步学习PHP(3) php 函数
Feb 15 PHP
php强制下载类型的实现代码
Apr 21 PHP
PHP中使用smarty生成静态文件的例子
Apr 24 PHP
ThinkPHP CURD方法之table方法详解
Jun 18 PHP
PHP实现获取文件后缀名的几种常用方法
Aug 08 PHP
Apache无法自动跳转却显示目录的解决方法
Nov 30 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
Apr 03 PHP
thinkPHP和onethink微信支付插件分享
Aug 11 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
Oct 14 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
我的论坛源代码(七)
2006/10/09 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php实现的短网址算法分享
2014/06/20 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php安装swoole扩展的方法
2015/03/19 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
Javascript的闭包详解
2014/12/26 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python读取和保存视频文件
2018/04/16 Python
关于Python-faker的函数效果一览
2019/11/28 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
几个数据库方面的面试题
2016/07/01 面试题
Java基础面试题
2012/11/02 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
贺卡寄语大全
2014/04/11 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
股权转让协议范本
2014/12/07 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python