[Resolved] Setting up the search portion of a view

[Author]

Posts

[MarcoS3712]

Hello, I've set a view and I want to hide search fields and show them if I check boxes.
I've read and followed: https://toolset.com/forums/topic/setting-up-the-search-portion-of-a-view/
... but it doesn't works.

2 Sections: Text Search and Advanced Search Fields

I would like to don't show filter options by default and show them only if checkboxes are checked

Here Edit View Search Code:

**************************************************
<div class="p-3 mb-2 bg-light text-dark">

<div class="form-group wpcf-search">
<input type="checkbox" id="txtsearch" name="txtsearch" value="1" checked>
<label for="txtsearch">Text Search</label>
<input type="checkbox" id="advsearch" name="advsearch" value="1" checked>
<label for="advsearch">Advanced Search</label>
</div>

<!-- Section for the text search option fields -->
<div id="text-search-container">
<div class="form-group">
<label for="wpv-post-search">[wpml-string context="wpv-views"]Cerca[/wpml-string]</label>
[wpv-filter-search-box output="bootstrap"]
</div>
</div>

<!-- Section for the Advanced Search option fields -->
<div id="advanced-search-container">
....

**************************************************
And this is JS
**************************************************

jQuery( document ).ready(function() {
searchFilterHideFunction();
});

function searchFilterHideFunction() {

jQuery('.text-search-container').hide();
jQuery('.advanced-search-container').hide();

var selectedOptions = [];
jQuery.each(jQuery(".wpcf-search input[type='checkbox']:checked"), function(){
selectedOptions.push(jQuery(this).val());
});

if( selectedOptions.indexOf('txtsearch') >= 0 ) {
jQuery('.text-search-container').show();
}

if( selectedOptions.indexOf('advancedsearch') >= 0 ) {
jQuery('.advanced-search-container').show();
}
}

**************************************************
Custom Search Settings
**************************************************

Let me choose individual settings manually
Update the View results every time an input changes
Javascript settings --> will run after updating the results --> searchFilterHideFunction

Many thanks!!! 🙂

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

Hi there

I can't quite tell what you are aiming for from your description.

Can we ignore how to implement what you want for a moment, and focus just on what you want?

You have a custom search View.

Is it the case that you want some of the search filters to be hidden when the page loads, and only revealed if the users clicks an "Advanced filters" checkbox?

Or something else?

[MarcoS3712]

Yes Nigel, I have different search fields in View Search section and I would like to set them hidden when page loads and revealed if the users clicks an "Advanced filters" checkbox.

Thanks,

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

As a newer user I would expect you to be using Blocks to create your View, so let me explain that, it should be easy enough to adapt if you prefer to use the legacy editor.

First, set up your View with the various filters. Put all of the advanced filters you want to reveal inside a conditional block, and in the sidebar add an ID to the conditional block so that we can target it with JS, e.g. "advanced-filters".

You will need to add your own checkbox input for toggling the display, and you can do that using a Custom HTML block, and you can also add the custom JS to the same block, inside script tags, like so:

<label for="show-advanced">Advanced search</label>
<input type="checkbox" id="show-advanced">

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
    (function ($) {
    	//hide advanced filters initially
		$("#advanced-filters").hide();
		//reveal when checkbox clicked
        $('#show-advanced').click(function () {
            $("#advanced-filters").toggle(this.checked);
        });

    })(jQuery);
});
</script>

So that will add a checkbox, and when the checkbox is clicked it will trigger the code which reveals (or hides) the advanced filters section, containing your other Views search filters.

[MarcoS3712]

Thanks Nigel for your answer.
I don't use ToolSet Block, I've edited a View.
How may I "mark" advanced filters in legacy editor in order to executeJS ?
With a section like <div id="advanced-filters"> ... </div> ?
I have also to change JS, isn't it?

View is like file attached

Thanks.

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

Sorry for the delay getting back to you, I had a public holiday yesterday.

With legacy Views you have complete control over the HTML markup of the search filters, by editing the Search and Pagination section of the View.

So you will want to effectively reproduce what I described above, where you will add the checkbox to toggle displaying the advanced filters, and you will want to wrap those advanced filters inside a div that you can target with the custom JS.

Here's an example of the full Search and Pagination section from my test site, where I have a text search field shown, followed by the checkbox, then inside a container div with id = advanced-filters I have additional search filters (for status and priority in my example, yours will be different), and then finally the submit button.

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	[wpv-filter-search-box output="bootstrap"]
</div>

<div>
  <input type="checkbox" id="show-advanced"> <label for="show-advanced">Advanced search</label>
</div>

<div id="advanced-filters">
  <div class="form-group">
      <label for="wpv-status">[wpml-string context="wpv-views"]Statuses[/wpml-string]</label>
      [wpv-control-post-taxonomy taxonomy="status" type="select" url_param="wpv-status"]
  </div>
  <div class="form-group">
      <label for="wpv-wpcf-priority">[wpml-string context="wpv-views"]Priority[/wpml-string]</label>
      [wpv-control-postmeta field="wpcf-priority" url_param="wpv-wpcf-priority"]
  </div>
</div>

[wpv-filter-submit output="bootstrap"]
[/wpv-filter-controls]
[wpv-filter-end]

Then I use the same custom code in the "JS editor" section, though I no longer need the script tags, i.e.

document.addEventListener("DOMContentLoaded", function (event) {
    (function ($) {
        //hide advanced filters initially
        $("#advanced-filters").hide();
        //reveal when checkbox clicked
        $('#show-advanced').click(function () {
            $("#advanced-filters").toggle(this.checked);
        });
 
    })(jQuery);
});

Hopefully that is clear, let me know if not.

[MarcoS3712]

My issue is resolved now. Thank you!