I want select2 to behave as sort of bobox.See attached image for ref. So if user types in a string but it is not found in source array, then on enter or closing select2 it should add that new string to source. So say if there were 2 values before, after above there would be now 3.

select2 just like bobox in file open dialogs

I have created sample code, but cant make it to work.I am unable to update source.

JSFIDDLE:

HTML:

<div class="row">
    <div class="col-md-2">
        <input type="hidden" id="select2_sample3" class="form-control ">
    </div>
</div>

JS:

$(function () {

    var preload_data = {
        results: [{
            id: 'user0',
            text: 'Disabled User',
        }, {
            id: 'user1',
            text: 'Jane Doe'
        }]
    };

    $("#select2_sample3").select2({
        placeholder: "Select...",
        allowClear: true,
        minimumInputLength: 1,
        data: preload_data,
        query: function (query) {
            var data = {
                results: []
            }, i, j, s;
            for (i = 1; i < 5; i++) {
                s = "";
                for (j = 0; j < i; j++) {
                    s = s + query.term;
                }
                data.results.push({
                    id: query.term + i,
                    text: s
                });
            }
            query.callback(data);
        }

    }).on("select2-close", function () {
        // add to 
        console.log("close");
    });
});

I want select2 to behave as sort of bobox.See attached image for ref. So if user types in a string but it is not found in source array, then on enter or closing select2 it should add that new string to source. So say if there were 2 values before, after above there would be now 3.

select2 just like bobox in file open dialogs

I have created sample code, but cant make it to work.I am unable to update source.

JSFIDDLE:

HTML:

<div class="row">
    <div class="col-md-2">
        <input type="hidden" id="select2_sample3" class="form-control ">
    </div>
</div>

JS:

$(function () {

    var preload_data = {
        results: [{
            id: 'user0',
            text: 'Disabled User',
        }, {
            id: 'user1',
            text: 'Jane Doe'
        }]
    };

    $("#select2_sample3").select2({
        placeholder: "Select...",
        allowClear: true,
        minimumInputLength: 1,
        data: preload_data,
        query: function (query) {
            var data = {
                results: []
            }, i, j, s;
            for (i = 1; i < 5; i++) {
                s = "";
                for (j = 0; j < i; j++) {
                    s = s + query.term;
                }
                data.results.push({
                    id: query.term + i,
                    text: s
                });
            }
            query.callback(data);
        }

    }).on("select2-close", function () {
        // add to 
        console.log("close");
    });
});

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited Apr 2, 2014 at 6:53 joker 99099 silver badges2323 bronze badges asked Apr 2, 2014 at 6:51 djangodjango 2,90966 gold badges5151 silver badges8383 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I've recently had the same task. This is my solution:

<input type="hidden" name="trBrand" id="trBrand" class="form-control"></input>

and js code

$('#trBrand').select2({
    placeholder: 'choose something',
    allowClear: true,
    id: function(object) {
        return object.text;
    },
    createSearchChoice:function(term, data) {
        if ( $(data).filter( function() {
            return this.text.localeCompare(term)===0;
        }).length===0) {
            return {id:term, text:term};
        }
    },
    data:preload_data
});