PHP+jQuery实现自动补全功能源码
PHP+jQuery实现自动补全功能源码
发布时间:2016-12-29 来源:查字典编辑
摘要:前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。由于项目很多地方要用到这个功能,所以需要用心做一下。发现...

前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。由于项目很多地方要用到这个功能,所以需要用心做一下。发现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" id="colum" name="colum" 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>//</SPAN><SPAN> 提供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>" + 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教程学习
编程开发子分类