clear all select2 options - jquery-select2

I can't find on select2 documentation a way to remove all the options in a select2 form.
The old stckoverflow answers to this questions seem not to work since the new version (I'm using 4.0.3) has a different behavior

Just
$('#id').empty().trigger("change");
Where '#id' is the jQuery selector for your select2 element.

Previous answer will delete all values, but in the official documentation it says:
$("#id").val(null).trigger("change");

Related

I am facing issu with select2 clear function to remove manual selected option

select2 clear is not working when I am select option manually and clear t by js
Here is my function to clear select2 selected option
$('#select2_id option').removeAttr('selected');
Try this
$('#select2_id').val('').trigger('change);
Instead of
$('#select2_id option').removeAttr('selected');

How to add Select2 to a smarty template in Shopware 5 plugin?

I would like to add select2 to a smarty template in a shopware 5 plugin, in order to be able to type and search for a value in the dropdown. I was searching for it but found nothing relevant. As I see, there is only a standard <select> which is a html select, and {html_options} there is no way to type and search for what you are looking for in the dropdown, right? Is it possible to add select2 to smarty? If yes, could you please pont me to the rigth direction? If it's not possible or too complicated, what would be a better alternative? Is it possible in Shopware 6? (I wanted to ask this question actually on stack exchange, but I can't...)
Unfortunately you did not mention what you try so far.
I believe you have to add the Javascript resources as in https://select2.org/getting-started/installation and add the .select2() call in the on ready.
The HTML of the select can stay the same - the select2 script will transform this.

Add tooltips for ng-tagsinput

I have been using ng-tagsinput from benford -> http://mbenford.github.io/ngTagsInput/
I am trying to add tooltips for tags added in input field. This tooltip should show contents of the tag. Can anyone help me to add tooltips for the tag?
Any help is appreciated.
Thank you,
I have made little changes in latest file of ng-tags-input.js and ng-tags-input.min.js that will solve your requirement of tool tip.
I have added ng-attr-title={{$getDisplayText()}} at ngTagsInput/tag-item.html template section in js file. by simply adding title attribute to the span tag will work. This change made for you, but #mbenford the creator of this library may add this as an feature.
You can download the file from below links. and you can see the tooltip on tags :)
https://ufile.io/k5v8w - min js
https://ufile.io/sntbh - unminified js
This is a very old question but a template approach is better. Just use the "template" attribute and add tooltip to your template. Details here:
http://mbenford.github.io/ngTagsInput/documentation/guides/custom-templates

jQuery UI Autocomplete: How to target dropdown menu?

Problem: I have to color my results in the little dropdown based on their value.
Solution: Use the 'open' event hook to loop through options and assign a color.
Problem: So the documentation for the jQuery UI autocomplete says that the open event hook receives two arguments- 'ui' and 'event'. The problem is, 'ui' is just an empty object (someone filed a bug report about this, and the brilliant jQuery UI team said it's not a problem), and 'event' only has the input box, not the dropdown that's generated. At this point, the only way I can select my options list from here is to do this:
$( event.target ).nextUntil("ul.ui-autocomplete").last().next()
That's gross. Please tell me there's a better way?
PS: If anyone says "Just use $('ul.ui-autocomplete')!" you've obviously never worked on anything more complicated than.... something that's not complicated.
The official documentation is terrible, but after lots of exploring I figured it out:
$(event.target).data('autocomplete').menu.element
Are you writing a plugin? You can use this.element

Editable select/combobox

is there any way (or plugin) to display editable combobox? I have a set of options, but I would like to give possibility to enter custom value.
I've searched the documentation, and I can't find way to do this. I made workaround with javascript, but I'm looking for more elegant solution.
I'm pretty sure that there simply is no HTML form element that does this, and so Rails can't provide you with a helper. As you said, you can work with JS to create something similar (and there should be JS libraries/plugins already out there), or you could just use a select element and add a text field next to it for new values.
HTML5 specification doesn't define such an element. So you may either continue using JS, either try to use autocomplete feature of an input element (although it is not exactly what you want and doesn't compatible with old browsers).

Resources