javascript - How to initialize selectize on ajax? - Stack Overflow

admin管理员组

文章数量:1302417

I have to populate the selectize after getting data from ajax. But it is not working inside ajax success.

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;
        }
    });

How to display the values I get from ajax in selectize??

I have to populate the selectize after getting data from ajax. But it is not working inside ajax success.

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;
        }
    });

How to display the values I get from ajax in selectize??

• javascript
• jquery
• ajax
• selectize.js

Share Follow asked Aug 9, 2016 at 6:29 baig772baig772 3,4981212 gold badges5454 silver badges9898 bronze badges 2

• 1 but all you do in your success method is just console.info, maybe it is not enough? :) – maxwell Commented Aug 9, 2016 at 6:32
• Yes it is not, I tried to make an array of options and pass it to selectize method below but it didn't work – baig772 Commented Aug 9, 2016 at 6:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

there is add/update/remove/clear api https://github./selectize/selectize.js/blob/master/docs/api.md if u do not want to reInitialize it

// 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()
}

本文标签： javascriptHow to initialize selectize on ajaxStack Overflow