bootstrap select2 tags用法总结

flyer_dev 发布于2019-08-22 11:59 / 3424人阅读

摘要：原创用法总结前言最近用到的，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。

（原创） bootstrap select2 用法总结

前言

最近用到bootstrap 的 select2，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。

效果图

无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css
及：

{{ stylesheet_link("css/bootstrap.css") }}
{{ stylesheet_link("css/select2.min.css") }} 
{{ stylesheet_link("css/font-awesome.min.css") }} 
{{ stylesheet_link("css/prettify.css") }} 


{{ javascript_include("js/lib/jquery.js") }}
{{ javascript_include("js/lib/select2.full.js") }}
{{ javascript_include("js/lib/bootstrap.js") }}

固定方式获取

$(".js-example-tags").select2({
    tags: true, //是否可以自定义tag
    createSearchChoice:function(term, data) { 
        alert(1);
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: true,
    data: [{id: 0, text: "story"},{id: 1, text: "bug"},{id: 2, text: "task"}]
});

ajax方式获取

$(".js-example-tags").select2({
  // enable tagging
  tags: true,

  // loading remote data
  // see https://select2.github.io/options.html#ajax
  ajax: {
    url: "Ask2/tags",
    processResults: function (data, page) {
      console.log(data);
      var parsed = data;
      var arr = [];
      for(var x in parsed){
          arr.push(parsed[x]); //这个应该是个json对象
      }
      console.log(arr);
      return {
        results: arr
      };
    }
  }
});

说明

在ajax中的数据返回格式应该是这个样子滴（results）：

      [{id: 0, text: "story"},{id: 1, text: "bug"},{id: 2, text: "task"}]

对应的php代码例子

        ...
        $p1 = array(id => "1",text=>"java");
        $p2 = array(id => "2",text=>"jvm");
        $test = array(1=>$p1,2=>$p2);        
        $params["responseData"] = $test;
        $this->view->disable();
        return parent::ajaxResponse($params);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92345.html

bootstrap select2 tags用法总结

摘要：原创用法总结前言最近用到的，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。（原创） bootstrap select2 用法总结前言最近用到bootstrap 的 select2，官方文档中的例子也很多在此写一些实际项目中用法总结，有需要的朋友可以借鉴一下。效果图 showImg(https://segmentfault.com/img/bV...

Zack 2019-06-27 11:34 评论0 收藏0
Laravel 5系列教程九：Eloquent Relationship

摘要：至于一对一和一对多这两种关系，可以触类旁通。注意文件的下载或来源，请自行获取。接下来，我们使用取得文章的标签，这个就是我们声明多对多关系的方法。原文来自 https://laravist.com/article/18 免费视频教程地址 https://laravist.com/series/laravel-5-basic Laravist是我刚刚上线的Laravel社区，有任何与L...

haobowd 2019-06-27 11:33 评论0 收藏0
用Selectize.js输入tag

摘要：本来处理输入控件是很多的，比如，又比如，都各有各的好处，但也各有各的不足。今天选择一款简单的插件。特点就是容易用，来看看怎么用。引入项目文件不是必须的，而且还没有原生的那么漂亮，但胜在和风格统一。本来处理tags输入控件是很多的，比如select2，又比如chosen，都各有各的好处，但也各有各的不足。今天选择一款简单的插件：selectize.js Github: https://...

sixleaves 2019-08-26 12:08 评论0 收藏0
Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

摘要：修复后得到合法的后在由布局引擎建立相应的对象。在标签放置于标签之后时，源码被所有浏览器泛指上常见的修复为正常形式，即。上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路主题布局配置上篇我们将 body 标签主体部分进行了简单总览，下面看看最后的脚本部门。页面结尾部分（Javascripts 脚本文件）我们来看看代码最后的代码，摘取如下： ...

piglei 2019-08-20 10:30 评论0 收藏0
Yii2下的select2使用

摘要：新手，不擅长写，纯粹只是分享一下自己遇到的问题供大家参考一下这个插件，就是带搜索功能的下拉选择框效果如图使用前先确定自己的项目安装了，如果没有的话就用安装一下使用的时候先在头部引用插件如果表单是，可以使用下面代码是键值对数组，下面所声明的新手，不擅长写js，纯粹只是分享一下自己遇到的问题供大家参考一下 select2这个插件，就是带搜索功能的下拉选择框效果如图：showImg(ht...

Cristic 2019-06-28 13:40 评论0 收藏0