jQuery select2動態選項

Question

我有一個多重選擇，我想用作搜索框，以便用戶可以按類別，事件類型，位置和關鍵字進行搜索。它具有以下結構：

<select name="search-term[]" multiple="multiple"> 
    <optgroup label="Categories"> 
     <option value="category_4">Internal</option> 
     <option value="category_2">Business</option> 
     <option value="category_5">External</option> 
     <option value="category_1">Science</option> 
     <option value="category_6">Sports and Social</option> 
    </optgroup> 
    <optgroup label="Event Types"> 
     <option value="eventtype_2">Meeting</option> 
     <option value="eventtype_3">Social Activity</option> 
     <option value="eventtype_4">Sporting Activity</option> 
     <option value="eventtype_1">Symposium</option> 
    </optgroup> 
    <optgroup label="Locations"> 
     <option value="location_2">Office 1</option> 
     <option value="location_3">Office 2</option> 
     <option value="location_1">Office 3</option> 
    </optgroup> 
</select> 

我已經初始化選擇2與tags選項設置爲true，所以像這樣：

$('select').select2({ 
    tags : true, 
    createTag: function (params) 
    { 
     return { 
      id: 'keyword_' + params.term, 
      text: params.term, 
      newOption: true 
     } 
    } 
}); 

這將允許用戶如果不存在，進入一個新的選項，照顧關鍵字的要求。任何新標籤都會附加keyword_，以便服務器在提交表單時知道如何處理它們。

這是所有正常工作，但我遇到的問題是，如果有人想要搜索一個與其他選項相同的關鍵字，那麼他們無法創建一個新的關鍵字標記它只會讓他們選擇現有的選項。例如，如果我搜索Office 1，我可能想要搜索位於辦公室1的事件，或者我可能想要執行關鍵字搜索，以便搜索標題中具有辦公室1的事件。問題是目前我只能選擇位置選項，我無法創建新標籤。有誰知道我怎麼能做到這一點？

Answer 1

我最終通過使用AJAX數據源實現了這一點，它使您可以更好地控制向用戶顯示的選項。這裏是我的代碼：

$('select').select2({ 
    ajax: { 
     url: "/server.php", 
     dataType: 'json', 
     type: "GET", 
     delay: 0, 
     data: function (params) { 
      var queryParameters = { 
       term: params.term 
      } 
      return queryParameters; 
     }, 
     processResults: function (data) { 
      return { 
       results: $.map(data, function (item) { 
        return { 
         text: item.text, 
         id: item.id, 
         children: item.children 
        } 
       }) 
      }; 
     }, 
     cache: false 
    }, 
    templateSelection: function(item) 
    { 
     return item.parent+': '+item.text; 
    } 
}); 

server.php的內容：

<?php 
$term = !isset($_GET['term']) ? null : ucfirst($_GET['term']); 

$categories = array('Meeting', 'Seminar', 'Sports and Social'); 
$locations = array('Cambridge', 'London', 'Northwich'); 
$matching_categories = array(); 
$matching_locations = array(); 

foreach($categories as $i => $cat) { 
    if(is_null($term) || stripos($cat, $term)!==false) { 
     $matching_categories[] = array(
      'id' => 'category_'.$i, 
      'text' => $cat, 
      'parent' => 'Category' 
     ); 
    } 
} 

foreach($locations as $i => $loc) { 
    if(is_null($term) || stripos($loc, $term)!==false) { 
     $matching_locations[] = array(
      'id' => 'location_'.$i, 
      'text' => $loc, 
      'parent' => 'Location' 
     ); 
    } 
} 

$options = array(); 

if(!empty($matching_categories)) { 
    $options[] = array(
     'text' => 'Category', 
     'children' => $matching_categories 
    ); 
} 

if(!empty($matching_locations)) { 
    $options[] = array(
     'text' => 'Location', 
     'children' => $matching_locations 
    ); 
} 

if(!is_null($term)) { 
    $options[] = array(
     'text' => 'Keyword', 
     'children' => array(
      array(
       'id' => 'keyword_'.$term, 
       'text' => $term, 
       'parent' => 'Keyword' 
      ) 
     ) 
    ); 
} 

echo json_encode($options);