Selectize.js: Autocomplete from remote source json?

Created on 5 Apr 2015 · 4Comments · Source: selectize/selectize.js

Can someone point me to an example of this in action? I found a basic example here: https://github.com/brianreavis/selectize.js/issues/683#issuecomment-76474114 but I'm still not sure how to specify a remote url (which returns a json reponse) and the problem is as soon as I click inside of the input field, the drop down appears. Is there a way to not show the drop down until the user starts typing and then only show the drop down if there's data that matches what they're typing?

Just to give you an idea of what I'm after, here's an example: http://goodies.pixabay.com/jquery/tag-editor/demo.html. They have an autocomplete example that works well.

Sorry if this is obvious.

Source

deronsizemore

Most helpful comment

You can use it like this:

var $name = $('select#complete'),selectize({
    valueField: 'Id',
    labelField: 'Name',
    searchField: 'Name',
    options: [],
    persist: false,
    loadThrottle: 600,
    create: false,
    allowEmptyOption: true,
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: YOURURLHERE,
            type: 'GET',
            dataType: 'json',
            data: {
                name: query,
                additionalDataIfRequired: 'Additional Data'
            },
            error: function() {
                callback();
            },
            success: function(res) {
                // you can apply any modification to data before passing it to selectize
                callback(res);
                // res is json response from server
                // it contains array of objects. Each object has two properties. In this case 'id' and 'Name'
                // if array is inside some other property of res like 'response' or something. than use this
                //callback(res.response);
            }
        });
    }
})[0].selectize;

shoaibshakeel381 on 20 Apr 2015

👍3

All 4 comments

You can use it like this:

var $name = $('select#complete'),selectize({
    valueField: 'Id',
    labelField: 'Name',
    searchField: 'Name',
    options: [],
    persist: false,
    loadThrottle: 600,
    create: false,
    allowEmptyOption: true,
    load: function(query, callback) {
        if (!query.length) return callback();
        $.ajax({
            url: YOURURLHERE,
            type: 'GET',
            dataType: 'json',
            data: {
                name: query,
                additionalDataIfRequired: 'Additional Data'
            },
            error: function() {
                callback();
            },
            success: function(res) {
                // you can apply any modification to data before passing it to selectize
                callback(res);
                // res is json response from server
                // it contains array of objects. Each object has two properties. In this case 'id' and 'Name'
                // if array is inside some other property of res like 'response' or something. than use this
                //callback(res.response);
            }
        });
    }
})[0].selectize;

shoaibshakeel381 on 20 Apr 2015

👍3

@deronsizemore can we close this issue now?

msurguy on 11 May 2015

Sorry for the delay. Have a newborn at home and it's tough to find time to do much online at the moment. I haven't had the chance to try this year, but sure, close it and if i get stuck when i get the chance to try it I'll post back. I appreciate your help.

deronsizemore on 12 May 2015

❤1

no problem @deronsizemore! The baby is the most important! Thanks for stopping by.

msurguy on 12 May 2015

Was this page helpful?

0 / 5 - 0 ratings