Selectize.js: Selectize not adding new option when loading remote data

[crhonox]

i have my selectize like this

$("#contractor_category_ids").selectize({
      plugins: ['remove_button'],
      valueField: 'id',
      labelField: 'name',
      searchField: ['name'],
      closeAfterSelect: true,
      create: function(input,callback) {
        $.ajax({
            url: '/contractor/categories',
            method: 'POST',
            data: {'category[name]' : input},
            success: function (result) {
                if (result) {
                  callback({ value: result.id, text: input});
                }
            }
        });
      },
      load: function(query, callback) {
        url = $("#contractor_category_ids").data('url');
        $.ajax({
          url: url,
          data: { query: query},
          dataType: "json",
          type: 'GET',
          error: function() {
            callback();
          },
          success: function(res) {
            callback(res);
          } 
        })
      }
    });

and that work like a charm, i can search categories and select them , the problem is when i try to add a new category, the category is created but not selected.

i can get to work the search autocomplete or the create new category but not the two of them together.

with this code i can add new options but the autocomplete stop working

$("#contractor_category_ids").selectize({
      plugins: ['remove_button'],
      closeAfterSelect: true,
      create: function(input,callback) {
        $.ajax({
            url: '/contractor/categories',
            method: 'POST',
            data: {'category[name]' : input},
            success: function (result) {
                if (result) {
                  callback({ value: result.id, text: input});
                }
            }
        });
      },
      load: function(query, callback) {
        url = $("#contractor_category_ids").data('url');
        $.ajax({
          url: url,
          data: { query: query},
          dataType: "json",
          type: 'GET',
          error: function() {
            callback();
          },
          success: function(res) {
            callback(res);
          } 
        })
      }
    });

i don't know how to fix it pls help

[caiotarifa]

I have the same issue. Any news?

[uberubert]

edit: I just realized, this may actually not be the same issue I'm seeing..
Original post:
I also have this issue, despite matching the examples perfectly.

The problem I'm seeing:
First search does not render options.
However, click outside the select, then click inside the select. Suddenly the options are rendered perfectly.

[crhonox]

yeah the options are redered perfectly but it should add automatically the option as a tag

[mgilberties]

I am having the same issue. I have noticed that that the issue only exists when the data is loaded remotely. When the select input has the data on the page at page load, this issue doesn't exist.

[keatonvictor]

Morning all

I noticed this issue and it appears to only occur when using Jquery AJAX calls on localhost.

If you switch to $.get it starts working again!

`

        $.get( "/search?q=" + query, function( data ) {
          console.log(data);
            callback(data);
        });

`

[ombimo]

i found the answer here https://stackoverflow.com/questions/24366365/creating-an-item-if-not-already-exists-in-selectize-js-select-box-and-ajax-updat

Actually you must return an object with properties that match the names for your labelField and valueField options

so for your code you need to pass _id_ and _name_ to callback not _value_ and _text_
callback({ id: result.id, name: input});

[legshooter]

I feel like there's more than 1 issue being discussed here, but I am also experiencing that remotely loaded options appear only after blur and refocus.

[keatonvictor]

@legshooter this is a related issue which also causes the same problem.

The dataset you pass back via callback, must have fields and values for the items defined in "searchField" and "labelField" if for some reason a value is undefined, it will stop the rendering.

See below,

`

        $.get( "/api/users?q=" + query, function( data ) {

            var collection = [];

            for(var i=0;i<data.length;i++){

                var datum = data[i];

                collection.push({
                    id : datum.id,
                    name: (datum.name ? datum.name : ""),
                    email: (datum.email ? datum.email : "")
                });

            }

            callback(collection);

        });

`

[skerit]

That was the issue for me, I didn't specify a searchField option, hoping it would just show whatever the server sends, but the searchField option defaults to ['text'], and there was no such property on my data.

Eventually I set searchField to ['_search', 'text', 'title', 'name'] and concatenated the search fields I was querying on the server into a new _search property. (With the other 3 just as a fallback)

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.