2016-08-09 32 views
0

從ajax獲取數據後,我必須填入selectize。但它不在ajax success內部工作。如何在ajax上初始化selectize?

HTML

<select name="hospital" id="store_hospital"> 
    <option value="" disabled selected>Choose Hospital</option> 
    <?php 
    foreach ($hospitals as $hospital) { 
    ?> 
    <option value="<?php echo $hospital->uid ?>"><?php echo $hospital->name ?></option> 
    <?php 
    } 
    ?> 
</select> 
<select id="select-to" class="contacts" placeholder="Pick some people..."></select> 

JS

$('#store_hospital').on('change', function() { 
    var value = $('#store_hospital').val(); 
    $.ajax({ 
    type: 'GET', 
    url: "/get-store-clients/" + value, 
    success: function (data) { 
     console.info(data); 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
      } 
     }); 
    }); 
$('#select-to').selectize({ 
     persist: false, 
     maxItems: null, 
     valueField: 'email', 
     labelField: 'name', 
     searchField: ['first_name', 'last_name', 'email'], 
     sortField: [ 
      {field: 'first_name', direction: 'asc'}, 
      {field: 'last_name', direction: 'asc'} 
     ], 
     options: [ 
      {email: '[email protected]', first_name: 'Nikola', last_name: 'Tesla'}, 
      {email: '[email protected]', first_name: 'Brian', last_name: 'Reavis'}, 
      {email: '[email protected]'} 
     ], 
     render: { 
      item: function (item, escape) { 
       var name = formatName(item); 
       return '<div>' + 
         (name ? '<span class="name">' + escape(name) + '</span>' : '') + 
         (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') + 
         '</div>'; 
      }, 
      option: function (item, escape) { 
       var name = formatName(item); 
       var label = name || item.email; 
       var caption = name ? item.email : null; 
       return '<div>' + 
         '<span class="label">' + escape(label) + '</span>' + 
         (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') + 
         '</div>'; 
      } 
     }, 
     createFilter: function (input) { 
      var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i'); 
      var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'); 
      return regexpA.test(input) || regexpB.test(input); 
     }, 
     create: function (input) { 
      if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) { 
       return {email: input}; 
      } 
      var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i')); 
      if (match) { 
       var name = $.trim(match[1]); 
       var pos_space = name.indexOf(' '); 
       var first_name = name.substring(0, pos_space); 
       var last_name = name.substring(pos_space + 1); 

       return { 
        email: match[2], 
        first_name: first_name, 
        last_name: last_name 
       }; 
      } 
      alert('Invalid email address.'); 
      return false; 
     } 
    }); 

如何顯示我在selectize ajax獲得價值觀

+1

但所有你在你的'success'方法做的就是' console.info',也許這是不夠的? :) – maxwell

+0

是的它不是,我試圖做出一系列的選項,並通過它selectize方法下面,但它沒有工作 – baig772

回答

3

有添加/更新/刪除/清除API https://github.com/selectize/selectize.js/blob/master/docs/api.md 如果你不希望重新初始化

// initialize the Selectize control 
 
var $select = $('select').selectize(options); 
 

 
// fetch the instance 
 
var selectize = $select[0].selectize; 
 

 
$ajax.success = function(data) { 
 
    selectize.clearOptions(); 
 
    for (var i in data) { 
 
    selectize.addOption(i, data[i]); 
 
    } 
 
    selectize.refreshOptions() 
 
}

+0

我認爲這是正確的答案,我已經刪除了我的 – cske

+0

你的一個人爲我工作,讓我試試這個 – baig772