jquery-select2

How can I get the selected text in Select2 to wrap instead of using an ellipsis? The option items wrap, but I'd like the input field to be able to expand down instead of over. Here's an example : $('.select2').select2(); <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script> <select class="select2" style="width:100px"> <option value="AL">Really long name that normally wouldn't be visible<

I'm using Select2 plugin ( http://ivaynberg.github.io/select2/ ) and as you can see by the list of tags I have in the screenshot, they aren't listed alphabetically and I'd like to be able to do so. EDIT: This is what I currently have, but instead of query, I want to sort the data (@appTags) via 'text', not 'id': scope.find('input[name=noun]').select2({ data: @appTags, sortResults: function(results, container, query) { if (query.term) { return results.sort(); } return results; } }); Screenshots of my Console paused in Debugger: Here's an image of the @appTags object, of which I'd like to sort

I've tried to capture select2:clearing event $("#my-select").on("select2:clearing", function (e) { console.log('cleared'); }); ( jsfiddle ) but it is not fired. I've also tried other versions (like select2:removed etc., see another question with similar problem), but it also doesn't work. I use select2 4.0.0-beta2. The changelog of select2 4.0.0-beta2 states: Removed events select2-clearing - Use select2:unselecting instead https://github.com/select2/select2/releases This works: $("#my-select").on("select2:unselecting", function(e) { }); $("#my-select").on("select2:select select2:unselecting",

I have an input (textarea) that has Select2's tags applied to it. So when a user types in the name of an item that exists in my data base, it shows a list of matching items and the user can select one and a tag is created. Here is my code so far for basic tag functionality: $('#usualSuppliers').select2({ placeholder: "Usual suppliers...", minimumInputLength: 1, multiple: true, id: function(e) { return e.id + ":" + e.name; }, ajax: { url: ROOT + 'Ajax', dataType: 'json', type: 'POST', data: function(term, page) { return { call: 'Record->supplierHelper', q: term, page_limit: 10 }; }, results:

I use this code for insert data to select element with select2 plugin: $.ajax({ type: "POST", url: "ws.asmx/GetEvrakGrup", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (dc, status) { jsonData = JSON.parse(dc.d); $("#selectId").select2({ data: jsonData }); }, error: function () { alert("This is an Error");} }); After I want to set a value in this select but its not working: $("#selectId").val(81); Try this : $("#selectId").val(81).trigger('change'); Instead of $("#selectId").val(81); try below code: var $example = $("#selectId").select2();

As soon as I add tags to my jQuery select2 it breaks and reverts back to the normal HTML select box. Here is my code (exactly like this example ): $(document).ready(function() { $("#tags").select2({tags:["red", "green", "blue"]}); }); If I remove the tags part it works again: $(document).ready(function() { $("#tags").select2(); }); If you look in your javascript console you will see the following error message: Error: Option 'tags' is not allowed for Select2 when attached to a <select> element. That means, when you want to use the 'tags' option, you have to apply it to an input:text element

With select2 dropdown, how do I get a default option to appear if no options match the user's typed input? $("something").select2({ formatNoMatches: function(term) { //return a search choice } }); I haven't been able to find anything that really matches this desired functionality within the select2 documentation or Stack Overflow. Edit I'm getting closer with this $("something").select2({ formatNoMatches: function(term) { return "<div class='select2-result-label'><span class='select2-match'></span>Other</div>" } }); But this is pretty hacky off the bat, and also isn't clickable. To complement

In my project I check if the Select2 plugin was loaded in this way if (jQuery().select2) But now I will try to verify what kind of version (3.5.X or 4.X) of Select2 plugin was loaded. I thought maybe you could check if there is an option/function introduced in version 4.X that is not present in the version 3.5.X. According to you, is it doable? How might I do it? Thank you There is a new isOpen method in Select2 4.0. You can use something like this in your developer toolbar: try { $("#a-select2-element").select2('isOpen'); 'select2 v4.x'; } catch(e) { 'select2 v3.x'; } Tested with Select2 v3.5