bootstrap select2 tags用法總結

Zack 發布于2019-06-27 11:34 / 1979人閱讀

摘要：原創用法總結前言最近用到的，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。

（原創） 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);

GPU云服務器云服務器 select2 select2 jquery Tagged tag

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/21131.html

bootstrap select2 tags用法總結

摘要：原創用法總結前言最近用到的，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。（原創） bootstrap select2 用法總結前言最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實際項目中用法總結，有需要的朋友可以借鑒一下。效果圖 showImg(https://segmentfault.com/img/bV...

flyer_dev 2019-08-22 11:59 評論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