当前位置:  编程技术>jquery

PHP+jQuery实现自动补全实现代码

    来源: 互联网  发布时间:2014-10-04

    本文导语:  前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。 由于项目很多地方要用到这个功能,所以需要用心做一下。发现select2这个插件的功能可以满足当前需求。 在使用jquery插件select2的...

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


例子:
 

代码示例:













飞流产品版块 (Ajax调用远程数据):


版块ID:




$(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 "
" + exercise.name + "
";
},
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中进行加工处理。


    
 
 

您可能感兴趣的文章:

  • php实现socket实现客户端和服务端数据通信源代码
  • PHP实现的AMQP php-amqplib
  • PHP实现Unicode和Utf-8互相转换
  • php解压文件代码实现php在线解压
  • php通过pack和unpack函数实现对二进制数据封装及解析
  • php通过数组实现多条件查询实现方法(字符串分割)
  • php微博短网址算法 php生成短网址的实现代码
  • php过滤html中网站链接 php实现域名白名单功能
  • php实现文件强制下载代码
  • PHP快速排序小例子 php快速排序实现方法
  • php 九九乘法口诀表实现代码
  • PHP实现获取图片颜色值的方法
  • php 通配符实现方法
  • php实现的九九乘法口诀表简洁版
  • PHP扩展实现的框架 ZoeeyPHP
  • PHP 语言实现 HippyVM
  • php实现斐波那契数列的简单写法
  • 如何实现类似PHP.PB等语言中eval的函数功能?
  • PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
  • apache配置php实现单一入口方法
  • 如何用php实现IP访问限制
  • php开源软件 iis7站长之家
  • PHP代码格式化 php.fmt
  • PHP去除html标签,php标记及css样式代码参考
  • php质数算法代码 php除法求质数
  • php session_id()函数介绍及代码实例
  • PHP获取php,mysql,apche的版本信息示例代码
  • php将html特殊字符转换成html字符串的函数:htmlspecialchars()介绍及代码举例
  • php判断字符串是否存在 php字符串检测代码
  • php获取访客ip地址原理及提供七段代码供参考
  • php 质数计算代码 PHP筛选法求质数
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery4PHP
  • PHP的服务器端jQuery phpQuery
  • AJAX-enabled Sticky Notes With PHP & jQuery
  • PHP的服务器端jQuery Jorp
  • 快速的jQuery插件和PHP表格生成器 Watajax
  • php jquery 多文件上传的实现代码
  • php jquery 多文件上传简单实例
  • jQuery+PHP+ajax实现微博加载更多内容列表功能
  • php配合jquery实现增删操作具体实例
  • php和jquery实现地图区域数据统计展示数据示例
  • 使用jQuery和PHP实现类似360功能开关效果
  • PHP Mysql与jQuery实现文件下载次数统计
  • PHP、Mysql、jQuery找回密码的实现代码
  • PHP jQuery表单,带验证具体实现方法
  • PHP、MySql、jQuery 实现“顶”与“踩”投票功能
  • 修改配置真正解决php文件上传大小限制问题(nginx+php)
  • IIS7配置PHP图解(IIS7+PHP_5.2.17/PHP_5.3.5)
  • PHP 5.4.19 和 PHP 5.5.3 发布及下载地址
  • php输入流php://input使用示例(php发送图片流到服务器)
  • 修改配置真正解决php文件上传大小限制问题(apache+php)
  • PHP转换器 HipHop for PHP
  • PHP 'ext/soap/php_xml.c'不完整修复存在多个任意文件泄露漏洞
  • PHP 框架 Pop php
  • php安装完成后如何添加mysql扩展
  • PHP的JavaScript框架 PHP.JS
  • PHP的substr() 函数用法
  • php服务器探针显示php服务器信息
  • PHP介绍及学习网站推荐
  • PHP缓存加速器 Alternative PHP Cache (APC)
  • php中操作memcache的类及成员列表及php下如何连接memched服务器
  • PHP源文件加密工具 PHP Screw


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3