2015-09-25 53 views
1

如何獲取超出默認值的值,這意味着我只想獲取新值自定義插入。jquery select2標籤獲取超出默認值

E.g現在我的默認值是「紅色」,「綠色」,「藍色」。 如果用戶輸入「黃色」,「黑色」。我只想新標籤已通知,因此我可以將其存儲在數據庫中以便下一個用戶預先填充。

我選擇2版本3.4.2是

HTML:

<input id="tags" class="text-input form-control" type="text" name="tags" size="24" placeholder="tags" > 

JS:(在文檔)

$(document).ready(function() { 
    $("#tags").select2({ 
    tags: ["red", "green", "blue"], 
    maximumInputLength: 10 
    }); 
}); 

我使用舊版本的jQuery老版本選擇2 小提琴鏈接: http://jsfiddle.net/jb4b2cnu/

這是怎麼製作的?

回答

1

如果我正確理解你的問題,這是添加新的標籤,如果它不存在,並通知到database那麼你可以在通過選項createTag創建newTag設置一個變量,然後利用select2.select事件發送或通知您的db有關新增tag。例如:

$("#tags").select2({ 
    tags: ["red", "green", "blue"], 
    maximumInputLength: 10, 
    createTag: function (tag) { 
     return { 
      id: tag.term, 
      text: tag.term, 
      isNew : true 
     }; 
    } 
}).on("select2:select", function(e) { 
    if(e.params.data.isNew){ 
     alert('make db call here');    
     $(this).find('[value="'+e.params.data.id+'"]').replaceWith('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>'); 
    } 
}); 

A樣品DEMO

+0

嗨Guruprasad饒,感謝您的解決方案!正如我測試你的代碼在select2 4.0中運行良好。但是我的開發使用的是3.5版本。我已經更新了小提琴,你可以看看嗎?謝謝! – Shiro

+0

@ Shiro ..搜索完所有網站後,我得出結論:沒有選項可以將新元素添加到選項列表中,但不確定,或通知標籤是否爲**新**,但是有事件調用'select2.selecting'而不是'select2:select',但再次沒有太多選項可以操作.. –

1

後,我在一箇舊版本的文獻研究,從(Select2 with createSearchChoice uses newly created choice for keyboard entry even given a match, bug or am I missing something?)回答後,並結合古魯普拉薩德饒想法。

這是我可以在舊版本中存檔的內容。

var result = ["red", "green", "blue"]; 
var isNew = false; 
var varNew = []; 
i = 0; 
$("#tags").select2({ 
    tags: result, 
    maximumInputLength: 10, 
    createSearchChoice:function(term, data) { 
     if(result.some(function(r) { return r.text == term })) { 
      return { id: term, text: term }; 
     } 
     else { 
      isNew = true; 
      varNew[i++] = term; 
      return { id: term, text: term + " (new)" }; 
     } 
    }, 
});