I'm trying to set tokenSeparators option using data-token-separators="[',']" but nothing happens, what is the right syntax to pass array of token separators in data attribute?
data-token-separators="[',']" is the correct way to do it. You may want to update to a newer version of Select2 as I found earlier versions were not handling this feature very well.
Recreate the select2 object with the updated settings.
So lets say your original separator was:
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
Then it should look like:
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',']
})
Visit select2 if you want more information.
Related
As the title shows, I used the Select2 without any error. The component works properly when I enter characters for search. The problem is that, when I click to open drop-down list, an empty list is shown. I checked the styles and scripts' probable conflicts, and test a simple lite version of select2 without any extra library. Unfortunately, The problem remains.
The problem is originated from minimumInputLength configuration parameter. If you set this parameter, the drop-down-list will be empty until a search term character enters. I commented out the problematic line, and everything seems good now.
$("#itemsList").select2({
placeholder: "Select Item",
language: "en",
// minimumInputLength: 1,
data: s_data,
formatSelection: format_data,
formatResult: format_data
});
I have implemented select2 widget, version 4. It works, but the x icon. It is not clearing the selection.
If you see this doc: https://select2.github.io/options.html, it says that this a problem in fact, but the documentation is incomplete for this.
Anyone has solved this already?
Thanks
Jaime
No it's not a bug. The "X" icon requires placeholder option.
Without it, clearAllow option cannot be used. So, right code will be like this:
$(".js-example-placeholder-single").select2({
placeholder: "Put some text...",
allowClear : true
});
By the way, there is undocumented option called debug. If you pass it to select2() method, the found errors will be printed on console. For example code in below:
$(".js-example-placeholder-single").select2({
//placeholder: "Put some text...",
allowClear : true,
debug: true
});
Will get in browser's console:
Why allowClear requires placeholder option?
The real drop down list, that you create with <select> and <option> elements hides by select2. And created new one.
In the new created drop down list, the field that user see (without drop down list) created automatically. Each time when you select new option, select2 will change previous Field with new one.
When X icon clicked, it also delete main field. And creates new field with parameters of placeholder.
Finally I have found it is a bug in Select2 4.0.2.
The solution is this, in select2.js, line 1760.
This has to be replaced:
this.$element.val(this.placeholder.id).trigger('change');
this.trigger('toggle', {});
By:
this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change');
//this.trigger('toggle', {});
This solution also causes the dropdown not to appear when selection is cleared.
In my case, the clear button is not working even placeholder option is set. I need to add z-index property:
.select2-container .select2-selection--single .select2-selection__rendered {
z-index:1;
}
Adding of the empty select option with value '' helped me.
Select2 4.0.3.
I want to do just a simple users loading in select 2 using AJAX. My code is as simple as:
$('.loadUsers').select2({
placholder: "Test placeholder",
minimumInputLength: 2
});
Now the first problem is the placeholder is not even working (nothing is displayed, no error at all) but the select2 input is displayed properly. Moreover, when I try to add the ajax option to select2 parameters I get the following error:
Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element.
How to solve these problems?
The version of Select2 I'm using is 3.2.
// EDIT
Ok, I somehow managed to fix the AJAX loading by assigning the select2 to a hidden input instead of a select and adding both data and results properties. However the placeholder is still not showing. Why?
For the Jquery UI tag-it widget, I'd like to disable text input into the class="ui-widget-content ui-autocomplete-input" textbox which contains all the tags.
My purpose is to just allow certain people the ability to delete inappropriate tags, but not allow anybody to add tags (which are auto-generated).
Is the best thing for me to edit the tag-it .js file and add a disable="disable" for that field? If I do that, won't that prevent the contents of that field from being submitted? Or does that matter as long as the associated hidden field is submitted?
Or is there a better way of doing this (an overriding style?) without modifying the tag-it file itself?
Thanks,
doug
In tag-it.js I replaced this line:
this._tagInput = $('<input type="text"').addClass('ui-widget-content');
with this:
this._tagInput = $('<input type="text" readonly="readonly"/>').addClass('ui-widget-content');
adding the readonly="readonly" attribute. That had the desired effect of preventing input but still allowing users to delete inappropriate auto-generated tags.
I had the same question as original op.
But as the question is 2 and a half years old, and tag-it version is changed.
The accepted answer needs to be updated to the folowing in
tag-it.js around line 478:
from:
if (this.options.readOnly){
tag.addClass('tagit-choice-read-only');
}
To:
if (this.options.readOnly){
tag.addClass('tagit-choice-editable');
// Button for removing the tag.
var removeTagIcon = $('<span></span>')
.addClass('ui-icon ui-icon-close');
var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
.addClass('tagit-close')
.append(removeTagIcon)
.click(function(e) {
// Removes a tag when the little 'x' is clicked.
that.removeTag(tag);
});
tag.append(removeTag);
}
This is under the documentation of git repository having the documentation, under the Properties section:
$("#myTags").data("ui-tagit").tagInput.addClass("fancy"); //Obviously
if you want to do something with class...
This translates to the solution for this below, in my personal implementation style, and probably the only way I could get this to work:
$("#myTags").data("ui-tagit").tagInput.prop('disabled' , true);
This is if I understand your question correctly.
Note: ReadOnly does not make the tags un-editable.
As far as going through the tags, you could use ..
var x = $("#myTags").tagit("assignedTags");
Make it as an input field, and that ensures its "singleFieldNode" meaning tags are , (comma) separated. That way you can parse through it (split for commas(,) into an object, or however you want to do it)
PS: To apply any of the snippets above, simply change to the "id" of the HTML element that contains TagIt, and your code would work correctly.
JQuery TagIt v2.0
Does anybody know how to remove the tooltip in Grails 2.0.4? Currently all my mandatory fields shows a tooltip. I am trying to create a UI without the tooltip. I am using jQuery and jQueryUI.
Is there anyway that I could remove the tooltip? I think the tooltip is set by default in Grails 2.0.4.
Thanks.
you could use jQuery to remove the title attribute like so...
$(document).ready(function() {
$('[title]').removeAttr('title');
});
I think this is html 5 related. Do the fields have "required" in the tags (which I know grails puts in by default when performing scaffolding)? If so, the browser will check that those fields are filled in and prompt the user if they are not before submission. This was driving me bonkers trying to figure out what was going on.