PHP+jQuery实现自动补全功能源码_PHP教程-php教程-PHP中文网

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

WBOY

发布： 2016-07-21 15:10:02

原创

1078 人浏览过

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

内层的span元素中，所以我会在查询结果页面加载后把隐藏域的name值写到span元素。

复制代码代码如下:

";
},
formatSelection: function(exercise) {
return exercise.name;
}
});

$('#colum').change(function(){
frm.submit();
});
var name = $("#columname").val();
if(name){
$("#s2id_colum").find("span").text(name);
}
});

下面是控制器的例子：

复制代码代码如下:

 
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