【输入智能提示功能】PHP+jQuery实现自动补全功能

最新推荐文章于 2021-03-18 22:28:33 发布

清枫草塘

最新推荐文章于 2021-03-18 22:28:33 发布

阅读量2.1k

点赞数

分类专栏： PHP语言文章标签： PHP Select2 jQuery Plugin

本文链接：https://blog.csdn.net/freshlover/article/details/8906973

版权

PHP语言专栏收录该内容

46 篇文章 1 订阅

订阅专栏

前面手工写了一个下拉自动补全功能，写的简单，只实现了鼠标选择的功能，不支持键盘选择。由于项目很多地方要用到这个功能，所以需要用心做一下。发现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",// 提供jsonp请求的url地址
            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

清枫草塘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【输入智能提示功能】PHP+jQuery实现自动补全功能

前面手工写了一个下拉自动补全功能，写的简单，只实现了鼠标选择的功能，不支持键盘选择。由于项目很多地方要用到这个功能，所以需要用心做一下。发现select2这个插件的功能可以满足当前需求。在使用jquery插件select2的过程中遇到了一些疑惑，无论是穿json数据还是通过jsonp方式取数据，都能够正确返回。可是下拉列表中的条目却不能被选中，对鼠标和键盘选择都无效。后来发现，sele
复制链接

扫一扫