> 백엔드 개발 > PHP 튜토리얼 > PHP+jQuery实现自动补全功能源码_PHP

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

WBOY
풀어 주다: 2016-06-01 12:07:14
원래의
785명이 탐색했습니다.

jQuery

前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。由于项目很多地方要用到这个功能,所以需要用心做一下。发现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元素。
复制代码 代码如下:















版块ID:




<script> <BR>$(document).ready(function() { <BR>$('#colum').select2({ <BR>minimumInputLength: 0, <BR>placeholder: '选择版块', <BR>ajax: { <BR>url: "http://pm.feiliu.com/?c=try&a=ajax_diy",<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">//<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> 提供jsonp请求的url地址 <BR> dataType: 'jsonp', <BR> jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名(一般默认为:callback,故可省略) <BR> //jsonpCallback:"testback", <BR> //jsonpCallback是自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可写"?",jQuery会自动处理数据 <BR>quietMillis: 100, <BR>data: function(name, page) { <BR>return { <BR>types: ["exercise"], <BR>limit: -1, <BR>q: name <BR>}; <BR>}, <BR>results: function(data, page ) { <BR>return { results: data.items } <BR>} <BR>}, <BR>formatResult: function(exercise) { <BR>return "<div class='select2-user-result'>" + exercise.name + ""; <BR>}, <BR>formatSelection: function(exercise) { <BR>return exercise.name; <BR>} <BR>}); <br><br>$('#colum').change(function(){ <BR>frm.submit(); <BR>}); <BR>var name = $("#columname").val(); <BR>if(name){ <BR>$("#s2id_colum").find("span").text(name); <BR>} <BR>}); <BR></script>



下面是控制器的例子:
复制代码 代码如下:
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.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿