Get user input from single select box using Select2

Question

Issue

I just started using Select2 (http://ivaynberg.github.io/select2/) and I am trying to do a basic task.

I have a select box that has, for example, 3 items in it. I want to be able to have the user either select 1 of the 3 results or type in their own result and then eventually, on submit, it will submit whatever value is in the box.

What I've Tried

<input style="width: 200px;" type="hidden" id="foo" />

<script type="text/javascript">
$(document).ready(function () {
        $("#foo").select2({
            query: function (query) {
                var data = { results: [{ text: 'math' }, { text: 'science' }, { text: 'english' }] };
                data.results.push({ text: query.term });
                query.callback(data);
            }
        });
    });
</script>

The code above allows me to see the 3 results and type in a result myself. But I am unable to get the typed in result to "stick" when I click away, hit enter, or select the result I just typed in. Same goes for the select options, but I am most concerned with the user inputted text.

Here's what it looks like:

Perrault

Answer 1

The parameter createSearchChoice allows you to do just what you want. Here is an example:

<script type="text/javascript">
    $("#foo").select2({
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.text.localeCompare(term)===0; }).length===0) {
                    return {id:term, text:term};
                }
            },
        multiple: false,
        data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
    });
</script>

Taken from a closed issue at: https://github.com/ivaynberg/select2/issues/201

Fiddle: http://jsfiddle.net/pHSdP/2/

Also, make sure you add a name to the input, otherwise you won't see the value at server side

<input style="width: 200px;" type="hidden" id="foo" name="foo" />

Brucie

Answer 2

Just a quick note for anyone else who's having a different data input. In case the console says " this.text is undefined ", make sure you check your text tag, like this:

<script type="text/javascript">
    // Data input taken from "label", not "text" like usual
    var lstData = [{id: 0, 'label': 'story'},{id: 1, 'label': 'bug'},{id: 2, 'label': 'task'}];
    $("#foo").select2({
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.label.localeCompare(term)===0; }).length===0) {
                    return {id:term, 'label':term};
                }
            },
        data: { results: lstData, text: 'label' }
    });
</script>

Uproar

Answer 3

Library you are using is used to filter options in a select box. It doesn't take new input, as per their own documentation:

Select2 is a jQuery based replacement for select boxes.It supports searching, remote data sets, and infinite scrolling of results.

I would suggest you to use jQueryUI Autocomplete or TypeAhead

Alphard

Those are just for auto-completing input by the user. I'm hoping to allow the users to either a.) click an option in the dropdown b.) type in their own option instead of selecting an option --- I know there are other libraries out there that could do this, but I like a majority of the features in Select2 the best. This example shows how it gets added to the list (ivaynberg.github.io/select2/#data) but I cannot get this example to simply work, as opposed to repeating the users input multiple times. Thanks for your comment though, I appreciate it! – Perrault