Configure harvesthq in elementor pro

Anonymous

#238726

Hi everyone, I would like to configure this script provided by Search & Filtre to have a more dynamic filtering system, this is the link:

https://harvesthq.github.io/chosen/

Do you know him? can you help me configure it with elementor pro?

Trevor

#238775

Chosen is included with our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

One of the reasons so many themes/sites use ‘Select’ replacement scripts is that much of the formatting of standard select controls is done by the browser, and so you have little or no control over that.

There is an option in our settings page to choose which Combobox script to use. If you change this to Select2, that script is then available for you to apply to the form (see below for how). Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

If you want the select box with a search box at the top, you need to add this JavaScript to the page:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2();
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2();
});
</script>

If you want it without the search box at the top of the select boxes, then this:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

This post shows the complete Select2 CSS that we already include in our plugin:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

At the end is an example of how to modify it.

Anonymous

#238983

Great! thank you! and sorry how can i add id on single input?

Trevor

#238987

You would have to find this part:

select.sf-input-select

and change that. Are you able to send me a live link/URL to your search page so I can take a look? Let me know which field.

[Author]

Posts