Entering values into a jquery-select2 that are not in the select list

Question

I have a use case where I allow people to type values into the text box of the select2 plugin that do not appear in the select list.

In one case I am providing validation and do not submit unless the user has a valid item selected but until they do I do not want to clear their values. The select box might contain 1.00, 1.50, 1.75, NA, ABS and the user has just typed 1.80. This is an invalid value but I don't want to lose their changes, I will flag that box as invalid and allow them to fix their changes. I do not want to add 1.80 to the select box as it is an invalid value, but I don't want to clear it either.

How is it possible to achieve this?

Good question. Keeping the user's transitional edits & validating them, is correct data handling. — Thomas W, May 13 '13 at 01:14
As of 4.0.0, Select2 supports custom values through $('xyz').select2({tags: true}), which does not support validation. However, you could format the value to indicate that it is invalid. Please see http://stackoverflow.com/a/30021059/192092. — Roy Hyunjin Han, May 22 '15 at 17:16

Thomas W · Accepted Answer · 2013-05-13T01:26:17.290

7

If you're validating in JS, Select2 has an example for dynamic loading/generating data which overrides query() to just repeats the user's input.

See: http://ivaynberg.github.io/select2/ 'Loading Data'

I solved a similar problem (server-side) with JQuery UI 'autocomplete'. Here, I took the approach of returning objects wrapping both a label with possible explanatory message, a text value without decoration, and a combined ID value & status flag. I overrode select to store the Text & ID to hidden fields.

In my case, I was distinguishing between existing Customers to reference, or creating a new Customer with the entered name. I was able to list options of matching existing customers or creating "ABC New Customer", quite nicely:

User enters: "Alphabet Soup" and sees a choice of:

Alpha Packaging
Campbells Soup
create "Alphabet Soup"

A similar technique might be applicable to you. Hope this helps.

edited May 13 '13 at 01:26

answered May 13 '13 at 01:20

Thomas W

13,940
4
58
76

I noticed that by using this approach my `ajax` implementation gets ignored, is there a way to call my ajax logic before or after `query` is executed? – Maksim Vi. Oct 25 '13 at 00:16
@MaksimVi. `query` is the fundamental datasource API, `ajax` is a shortcut for common AJAX/JSONP datasources. They are alternative ways to provide the datasource, it obviously does not make sense for Select2 to call both! If you want to do AJAX manually, put it in your `query` handler code. – Thomas W Oct 25 '13 at 00:25
@ThomasW I just want to reuse the logic provided in ajax object (call it manually). – Maksim Vi. Oct 25 '13 at 00:38
Your `query` implementation would be really nice to see! – Charles Wood Nov 22 '13 at 17:48

score 2 · Answer 2 · answered Sep 23 '13 at 13:07

$(document).ready(function() {
    var items = [{id: "1", text: "some_available_text"}];
    $("#hidden_input_for_select2").select2({
        query: function (query) {
            var data = {results: []};
            if(query.term.length > 0){
                data.results.push({id: 0, text: query.term });
            }
            $.each(items, function(){
                if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){
                    data.results.push({id: this.id, text: this.text });
                }
            });
            query.callback(data);
        }
    });
});

Entering values into a jquery-select2 that are not in the select list

2 Answers2