• 技术文章 >后端开发 >php教程

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

    2016-07-21 15:10:02原创569
    前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。由于项目很多地方要用到这个功能,所以需要用心做一下。发现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:<{$frmid}>








    下面是控制器的例子:
    复制代码 代码如下:

    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

    www.bkjia.comtruehttp://www.bkjia.com/PHPjc/327146.htmlTechArticle前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择。由于项目很多地方要用到这个功能,所以需...

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:PHP+jQuery 实现 自动 全功能 源码 前面 手工 写了 一个 下拉 自动 全功能 写的 简单 实现
    上一篇:PHP 处理TXT文件(打开/关闭/检查/读取)_PHP教程 下一篇:PHP处理excel cvs表格的方法实例介绍_PHP教程
    Web大前端开发直播班

    相关文章推荐

    • php反序列化实例详解之字符串逃逸• 一文带你PHP利用phpmailer实现邮件发送功能• 什么是PHPUnit?在PHP项目中怎么使用?• 模板引擎SMARTY_PHP• [转一篇比较老的文章]编写自己的php扩展函数_PHP

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网