jQuery Select2 is an awesome jQuery plugin. It provides very interactive UI for select drop downs. Select2 comes with AJAX support built in. Instead of giving list to select you can make ajax request and get dynamic data. Following are the steps to get the dynamic data in select2 in grails.

* Create a text field in your gsp page

<g:textField name="language" id="language" value="${language}" placeholder="Add your language"/>

* Write the following code in script in your gsp page or write it in a js file and include that js file in your page

$(document).ready(function () {
    $("#language").select2({
        id: function (language) {
            return language
        },
        ajax: {
            url: "/user/getLanguageList",
            dataType: 'json',
            data: function (enteredText, page) {
                return {
                    language: enteredText,
                    max: 20
                };
            },
            results: function (data, page) {
                return {results: data};
            }
        },
        formatResult: formatResult,
        formatSelection: formatSelection,
        escapeMarkup: function (m) {
            return m;
        }
    });

    function formatResult(data) {
        return '<div>' + data + '</div>';
    }

    function formatSelection(data) {
        return data;
    }
});

Here I am applying the select2 on the above text field. Select2 make this text field a select drop down. In the js code id block is responsible to setting user selected text in the field. If this block is removed then user can see the drop down but can not select any value. In the ajax request I am sending two parameters one is the text that user entered in the select2 search box and second is the max result I want.

Following is my action:

def getLanguageList() {
    List<Language> languageList = Language.createCriteria().list([max: params.max]) {
        ilike('name', "%${params.language}%")
    }
    render languageList*.name as JSON
}