[Resolved] Taxonomy filter as multiselect with searchbox (2)

[Author]

Posts

[romanB-3]

Since https://toolset.com/forums/topic/taxonomy-filter-as-multiselect-with-searchbox/ has been closed, please find my awnser to @juan here.
Thank you.

Hello and thank you very much,
It seems Gravity Forms uses specific html code (other than "select") to show the multiple select field with search bar.
But as you were saying before, if the html is correct, you may offer the flexibility to add the data attributes needed by the select. In deed, as you may see here hidden link it seems all it would need is to set the select as this :

<select class="selectpicker" data-style="btn-info" multiple data-live-search="true">

Then I would simply just to add the JS and CSS to the view to show it properly.
If that makes any sens, please could you point me where to add the data attributes ?
Thank you so much for your help !

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Roman

The problem I envisage with your solution is that the library you appear to be using runs straight away, it doesn't require initialising. And you would need to run some JS to add the data-attributes it needs to work, but it might be tricky to make sure your code runs before the library initialises.

A better solution would be one where you manually initialise the code the converts the select box into the multi-select search you are looking for.

Digging in my bookmarks I found this: hidden link

It doesn't require any special attributes to work, you manually initialise it on the required select element which it then converts.

So you simply need to

- enqueue your required scripts and styles
- add a JS code snippet on DOM ready that initialises selectize on your select groups

Check out the docs for selectize, I think it is fairly self-explanatory, but let me know if you have problems.

[romanB-3]

Hello and thank you very much for your help.
I've looked selectize.js but I don't see any multiselect on "select" elements ; the multiselects are "input" and "div" fields...
I don't know much about code so I may be missing something ?
Thank you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Roman

You're right, looking through the examples, I don't see multi-select.

Selectize is based on Select2, which does support multi-select.

See hidden link and check out the examples where you will see a multi-select example.

[romanB-3]

Hello and thank you very much.

I have looked the link and found in deed the multiselect I wanted, which is "multiple select boxes" (2nd example on hidden link).

I have added those to all my pages via the Avada theme :

<link href="<em><u>hidden link</u></em>" rel="stylesheet">
<script src="<em><u>hidden link</u></em>"></script>

Then I have added this code to the JS editor of the filter editor (in my view) :

$(".js-wpv-filter-trigger").select2();

But the select elements stay as before, with no changes.

What am I missing here ?

Thank you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Roman

There are a couple of possible issues here.

The first is that the select2 library files need to be correctly added.

I'm not sure how you add them in Avada, but the best practice for adding external CSS and JS files is to enqueue them as per official WordPress advice: https://developer.wordpress.org/themes/basics/including-css-javascript/

In any case you can use the browser dev tools to check whether the links to the files have been added to the page.

The next issue is that the '$' prefix used by jQuery may not be available unless you specifically make it available to your custom JS snippet, and you should also wait for the dom ready event before initiating select2. (I suspect you will find an error in your console about $ undefined.)

Try the following:

( function( $ ) {
	$( document ).ready( function(){

		$(".js-wpv-filter-trigger").select2();

	});
})( jQuery );

Let me know if that helps.

[romanB-3]

That is amazing.
Thank you very much !
Great support !!