PHP+jQuery实现自动补全功能源码

前端技术 2023/09/03 PHP
前面手工写了一个下拉自动补全功能，写的简单，只实现了鼠标选择的功能，不支持键盘选择。由于项目很多地方要用到这个功能，所以需要用心做一下。发现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

本文地址：https://www.stayed.cn/item/8531

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案