[Resolved] Filter via Select Menus not functioning properly

[Author]

Posts

[Jeff Coen]

Tell us what you are trying to do?
I've got a select menu for my filter with no button. Just the menu. The idea is which ever option you select from the dropdown should automatically take you to results for that selection. However, when I try to utilize it, nothing happens.

The search box does work appropriately, but we want customers to have the choice of search by category or by keyword.

Here's the code I'm currently using:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="one-half">
<h3>Search by Category</h3>
[wpv-control-post-taxonomy taxonomy="product-category" type="select" default_label="Select Category -->" output="legacy" url_param="wpv-product-category"]
</div>
<div class="one-half">
<h3>Search by Name</h3>
[wpv-filter-search-box][wpv-filter-submit name="Search" type="button" class="btn-search"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

Line five is the key.

Is there any documentation that you are following?
https://toolset.com/course-lesson/filtering-custom-lists-of-posts/

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link

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

Hi there

If you want the results to update when users choose an option from the select dropdown, without having to click a search button, then you need to change the custom search settings, as shown in the screenshot.

[Jeff Coen]

The fourth option, right? I changed that and it saved the view, but I go back to check on the homepage and no change. Does not go to the search results page.

[Luo Yang]

Hello,

I have checked the URL you mentioned above:
hidden link
You are using other plugins "elementor" to design that page, there is only view's search form, but I don't find the view's search result in that page.

I suggest you try to follow our document to setup the post view and search form:
https://toolset.com/course-lesson/creating-a-custom-search/

[Jeff Coen]

I watched video but that's not what I'm looking to do. Your example has both the search fields and results on the same page. We don't want that. We want it whether you select from the drop down menu or the text field, it should go to a results page. This is what we had previously. If you go over to hidden link you'll see the current example, which does work.

[Luo Yang]

You can follow our document to display the search form and search result in different pages:
https://toolset.com/course-lesson/displaying-search-results-on-a-different-page/
Displaying Search Results on a Different Page in WordPress

[Jeff Coen]

That tutorial is not for a select menu. It's a standard input text field type of search. I have that working. I need to get the select menu to work.

[Jeff Coen]

UPDATE: I just added a submit button to the select menu. It now works when that menu is in place. But why doesn't it work without the submit button? It used to.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Luo is on vacation. This is Minesh here and I'll take care of this ticket. Hope this is OK.

As I understand you want to submit the form when you change the dropdown option value. There is no such feature available until you will use AJAX but in your case you are redirecting to another page after you change the dropdown option as per your reference URL shared: hidden link

When I checked the page source, I see there is additional JS code added that is used to submit the form when you change the dropdown filter option and that is why its working with the above link.

The custom JS code that is used is as given under to submit the form.

jQuery(document).on('ready', function() {
jQuery('.js-wpv-filter-form-1303 select[name=wpv-category].js-wpv-filter-trigger, .js-wpv-filter-form-1303-TCPID1288 select[name=wpv-category].js-wpv-filter-trigger').on('change', function(e) {
$form = jQuery(e.target).closest('form');
$form.submit();
});
});

You will have to add such custom JS code that should help you to submit the form.