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?

Lidialidice

Good question. Keeping the user's transitional edits & validating them, is correct data handling. – Fuzee

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 https://mcmap.net/q/166408/-select2-dropdown-but-allow-new-values-by-user. – A1

Answer 1

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.

Fuzee

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? – Carbonari

@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. – Fuzee

@ThomasW I just want to reuse the logic provided in ajax object (call it manually). – Carbonari

Your query implementation would be really nice to see! – Merrimerriam

Answer 2

$(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);
        }
    });
});

Grose