加載值到Selectize.js

Question

問題

我有我已經selectized作爲工作正常查詢遠程數據標記的文本輸入，我可以搜索，甚至用它創建新項目，所有工程確定。

使用selectize：

var $select = $('.authorsearch').selectize({ 
    valueField: 'AuthorId', 
    labelField: 'AuthorName', 
    searchField: ['AuthorName'], 
    maxOptions: 10, 
    create: function (input, callback) { 
     $.ajax({ 
      url: '/Author/AjaxCreate', 
      data: { 'AuthorName': input }, 
      type: 'POST', 
      dataType: 'json', 
      success: function (response) { 
       return callback(response); 
      } 
     }); 
    }, 
    render: { 
     option: function (item, escape) { 
      return '<div>' + escape(item.AuthorName) + '</div>'; 
     } 
    }, 
    load: function (query, callback) { 
     if (!query.length) return callback(); 
     $.ajax({ 
      url: '/Author/SearchAuthorsByName/' + query, 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       maxresults: 10 
      }, 
      error: function() { 
       callback(); 
      }, 
      success: function (res) { 
       callback(res); 
      } 
     }); 
    } 
}); 

文本框：

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" /> 

例子：

後來，當我選擇一個（在這種情況下， '蘋果'），它如你所期望的那樣出現在徽章中，並且文本框的基礎值是ac這些項目的值的omma分隔列表。

電流輸出

問題是，當我打開一個網頁，並希望在selectized文本輸入的標籤來顯示從數據庫中檢索到的值，它只會加載的價值觀和我可以看不到顯示displayname的方式。

<input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" /> 

期望輸出繼電器

我已經試過各種用於輸入值的字段值有它加載的項目作爲展示自己的顯示名稱，而不是它們的值。下面是一個以JSON形式返回的單個對象的例子，能夠加載這些JSON數組作爲選擇標籤是理想的。

[{"AuthorId":1,"AuthorName":"Test Author"}, 
{"AuthorId":3,"AuthorName":"Apple"}, 
{"AuthorId":4,"AuthorName":"Test Author 2"}] 

我怎麼能去呢？我是否需要以特定方式形成文本框的值，還是需要使用一些JavaScript加載我現有的值？

Answer 1

我結束了使用onInitialize回調加載存儲在data-*字段中的JSON值。你可以看到它在行動here in this jsfiddle。

<input class="authorsearch" id="Authors" name="Authors" type="text" value="" 
data-selectize-value='[{"AuthorId":1,"AuthorName":"Test"},{"AuthorId":2,"AuthorName":"Test2"}]'/> 

基本上它解析data-selectize-value值，然後添加選項（多個）到selectize然後添加項本身。

onInitialize: function() { 
    var existingOptions = JSON.parse(this.$input.attr('data-selectize-value')); 
    var self = this; 
    if(Object.prototype.toString.call(existingOptions) === "[object Array]") { 
     existingOptions.forEach(function (existingOption) { 
      self.addOption(existingOption); 
      self.addItem(existingOption[self.settings.valueField]); 
     }); 
    } 
    else if (typeof existingOptions === 'object') { 
     self.addOption(existingOptions); 
     self.addItem(existingOptions[self.settings.valueField]); 
    } 
} 

我的解決方案假定你我的JSON對象是正確形成，而且它的一個單一的對象或對象數組，所以它可能會或可能不適合別人的需要。

所以它解析：

[{"AuthorId":1,"AuthorName":"Test"}, 
{"AuthorId":2,"AuthorName":"Test2"}] 

要：

基於當然我selectize設置在原來的職位上面。

Answer 2

感謝您的回答，並基於您的onInitialize（）方法，我結束了類似的解決方案。就我而言，我只需要翻譯一個值，因此我能夠將id和標籤存儲爲輸入字段中的數據屬性。

<input type="text" data-actual-value="1213" data-init-label="Label for 1213 item"> 

然後在初始化：

onInitialize: function() { 
     var actualValue = this.$input.data('actual-value'); 
     if (actualValue){ 
      this.addOption({id: actualValue, value: this.$input.data('init-label')}); 
      this.setValue(actualValue); 
      this.blur(); 
     } 
    } 

根據這些選項：

$('input').selectize({ 
    valueField: 'id', 
    labelField: 'value', 
    searchField: 'value', 
    create: false, 
    maxItems: 1, 
    preload: true, 
    // I had to initialize options in order to addOption to work properly 
    // although I'm loading the data remotely 
    options: [], 
    load: ... , 
    render: ..., 
    onInitialize: .... 
}); 

我知道這並不能回答你的問題，但希望分享以防萬一這可能幫助別人。

Answer 3

使用items屬性的新版selectize更簡單。基本上要設置一個選定的項目，你需要在選項中首先使用它。但是如果你使用像我這樣的遠程數據，這些選項是空的，所以你需要將它添加到這兩個地方。

$('select').selectize({ 
     valueField: 'id', 
     labelField: 'name', 
     options:[{id:'123',name:'hello'}], 
     items: ['123'], 
     ... 

這是爲我工作，帶我一段時間才能弄明白......所以只是分享