Select2中文幫助文檔詳解

Select2是一個用於優化下拉列表和輸入框的jQuery插件，它提供了很多功能強大的選項，可以使用戶選擇更加快捷方便，本文將從多個方面為大家詳細闡述Select2的應用以及相關問題的解決。

一、基本介紹

Select2可以被用來代替HTML的select元素，或者同普通的input元素一起使用。它可以根據輸入內容來動態地載入選項，並且提供多選、搜索、標籤和自定義渲染等功能。

下面是一個簡單的Select2實例：

    
        <select class="js-example-basic-single" name="state">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        <script>
          $(document).ready(function() {
            $('.js-example-basic-single').select2();
          });
        </script>
    

在這個例子中，我們只需要引入Select2的CSS和JS，並在需要代替的select元素上添加類名”js-example-basic-single”，在script標籤中調用Select2即可進行替換。

二、選項載入

有時候我們需要動態地載入下拉框的選項，Select2提供了三種方式進行選項載入：靜態數組、AJAX請求和函數。

1、靜態數組

靜態數組是一種簡單的方式，我們可以在HTML中以<option>標籤的形式定義選項，然後再將這個select元素應用到Select2上。如果我們想添加靜態選項，只需要修改HTML即可。

    
        <select class="js-example-array">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        <script>
          $(document).ready(function() {
            var data = [
              {id: 0, text: 'enhancement'},
              {id: 1, text: 'bug'},
              {id: 2, text: 'duplicate'},
              {id: 3, text: 'invalid'},
              {id: 4, text: 'wontfix'}
            ];
        
            $(".js-example-array").select2({
              data: data
            });
          });
        </script>
    

在這個例子中，我們直接在JS中定義了一個數組，然後將其作為參數傳遞給Select2。由於option標籤中的”value”屬性已經和JavaScript數組對象中的”id”屬性類似，因此在data數組中也只使用”id”和”text”兩個值對選項進行定義。

2、Ajax請求

如果數據量比較大的話，我們通常採用Ajax請求的方式進行列表展示。它可以進行遠程搜索、遠程選項添加以及顯示結果集等功能，形式與靜態數組非常相似。

    
        <select class="js-data-example-ajax">
          <option value="3620194" selected="selected">select2/select2</option>
        </select>
        
        <script>
          $(document).ready(function() {
        
            function formatRepo(repo) {
              if (repo.loading) return repo.text;
        
              var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result-repository__avatar'>" +
                "  <img class='select2-result-repository__avatar-img' src='" + repo.owner.avatar_url + "' />" +
                "</div>" +
                "<div class='select2-result-repository__meta'>" +
                "  <div class='select2-result-repository__title'>" +
                "    " + repo.full_name +
                "  </div>";
        
              if (repo.description) {
                markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
              }
        
              markup += "<div class='select2-result-repository__statistics'>" +
                "  <div class='select2-result-repository__forks'>" +
                "    <i class='fa fa-flash'></i> " + repo.stargazers_count +
                "  </div>" +
                "  <div class='select2-result-repository__stargazers'>" +
                "    <i class='fa fa-star'></i> " + repo.watchers_count +
                "  </div>" +
                "  <div class='select2-result-repository__contributors'>" +
                "    <i class='fa fa-user'></i> " + repo.forks_count +
                "  </div>" +
                "</div>" +
                "</div></div>";
        
              return markup;
            }
        
            function formatRepoSelection(repo) {
              return repo.full_name || repo.text;
            }
        
            $(".js-data-example-ajax").select2({
              ajax: {
                url: "https://api.github.com/search/repositories",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                  return {
                    q: params.term,
                    page: params.page
                  };
                },
                processResults: function(data, params) {
                  params.page = params.page || 1;
        
                  return {
                    results: data.items,
                    pagination: {
                      more: (params.page * 30) < data.total_count
                    }
                  };
                },
                cache: true
              },
              escapeMarkup: function(markup) {
                return markup;
              }, 
              minimumInputLength: 1,
              templateResult: formatRepo,
              templateSelection: formatRepoSelection
            });
        
          });
        </script>
    

3、函數。

當我們需要動態生成選項時，可以使用JavaScript函數來覆蓋默認的Ajax載入過程。這需要我們在初始化時將一個函數傳入”processResults”屬性中。

    
        <select id="example-plugin"></select>
        <script>
            $(document).ready(function() {
                function getResult() {
                    return $([
                        {id:"1", text:"第一項"},
                        {id:"2", text:"第二項"},
                        {id:"3", text:"第三項"}
                    ]);
                }
                $("#example-plugin").select2({
                  ajax:{
                    processResults:function(){ }
                  },
                  tags:true,
                  createTag:function(){return null;}
                }).append(getResult());
            });
        </script>
    

三、多選功能

Select2提供了多選功能，不像HTML select，Select2允許用戶可以在一個輸入框中選擇多個值，選中的值會以標籤的形式展現。

    
        <select class="js-example-basic-multiple js-states form-control" multiple="multiple">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        
        <script>
          $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
          });
        </script>
    

如果需要對選中項進行一些操作，比如求和、統計個數等，可以使用以下代碼：

    
        $('#案件所在區域， #涉案地點').on('change', function() {
          var caseRegions = $('#案件所在區域').val() || [];
          var locations = $('#涉案地點').val() || [];
        
          var count = caseRegions.length + locations.length;
          $('#count').text(count.toString());
        });
    

這段代碼監聽select列表的變化， 當選中的值發生變化時，獲取選中項的長度並進行相應操作。

四、搜索功能

Select2可以根據用戶的輸入來動態地載入選項，這也意味著它可以作為一個搜索框來使用。

下面我們創造一個實例，根據搜索結果展示電影海報：

    
        <input type="text" name="q" class="form-control js-data-example-ajax" />
        <script>
          $(document).ready(function() {
        
            function formatRepo(movie) {
              if (movie.loading) return movie.text;
        
              var $container = $(
                "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__avatar'></div>" +
                  "<div class='select2-result-repository__meta'></div>" +
                  "<div class='select2-result-repository__description'></div>" +
                "</div>"
              );
        
              $container.find(".select2-result-repository__avatar").append("<img src='" + movie.url + "' />"); 
              $container.find(".select2-result-repository__meta").append("<div class='select2-result-repository__title'>" + movie.title + "</div>");
              $container.find(".select2-result-repository__description").append(movie.plot);
              return $container;
            }
        
            function formatRepoSelection(movie) {
              return movie.title || movie.text;
            }
        
            $(".js-data-example-ajax").select2({
              ajax: {
                url: "https://www.omdbapi.com/",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                  return {
                    q: params.term + '*',
                    page: params.page
                  };
                },
                processResults: function(data, params) {
                  params.page = params.page || 1;
        
                  return {
                    results: data.Search,
                    pagination: {
                      more: (params.page * 10) < data.totalResults
                    }
                  };
                },
                cache: true
              },
              escapeMarkup: function(markup) {
                return markup;
              }, 
              minimumInputLength: 1,
              templateResult: formatRepo,
              templateSelection: formatRepoSelection
            });
        
          });
        </script>
    

注意，這個例子中，我們使用了一個API介面去獲取電影海報，如果需要使用，請保持請求速度，不然會一直載入。

五、標籤

標籤是Select2中一種強大的機制，它可以從輸入框中獲得多個單一的值，並根據這些值創建標籤，原生的HTML中並不支持標籤，所以這是一個很好的補充。

代碼如下：

    
        <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
          <option value="AL">Alabama</option>
          <option value="WY">Wyoming</option>
        </select>
        <script>
          $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
              tags: true
            });
          });
        </script>
    

在這個例子中，只需要添加”tags: true”選項就可以實現標籤的功能。

六、自定義渲染

Select2默認渲染效果不是非常好看，如果我們需要改變樣式，可以為每一個選項提供自定義渲染。

<select id="e6" style="width:300px;">

<option value="o1">Option one</option>

<option value="o2">Option two</option>

<option value="o3">Option three</option>

</select>

<script type="text/javascript">

var newOption = new Option("New text", "new
原創文章，作者：ONJQ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/137754.html