[Resolved] Customize the select element for a custom search filter

[Author]

Posts

[John Appleseed]

I have a post type called Candidates with a custom field called candidate-district-number. I added a search filter in the View that lets the user select their district to see only Candidates matching that district number.

This is not ideal for the user because while they know what town they live, they do not necessarily know their district number. My proposed solution was to copy the html from the Toolset search filter, change the option text so towns map to their correct district number, add the custom HTML back to the page in an HTML block, then remove the original filter so only my custom code remains. Note that multiple towns may share the same district number. I ended up with code like the following:

<div>
<div class="form-group">
<label class="wpv-custom-search-filter__label" for="wpcf-candidate-district-number">By town</label>
<span class="wpv-custom-search-filter__input">
<select id="wpv_control_select_wpcf-candidate-district-number" name="wpv-wpcf-candidate-district-number" class="js-wpv-filter-trigger form-control">
<option value="18">Townsville</option>
<option value="2">Cityton</option>
<option value="18">Hamlet</option>
</select>
</span>
</div>
</div>

When I select an option from the dropdown, the spinner appears momentarily but the filter is not actually performed. I'm wondering if you have any advice on a better way to accomplish this while integrating nicely with Toolset. Thanks!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Could you please share problem URL and admin access details and tell me what exactly you want to filter.

I understand that you added the custom HTML as select dropdown but what things you want to filter.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Blocks is special, we add filter in backend and it generates the filter HTML output on frontend.

Doing amendments to its normal flow it will require some adjustment and you already did it. The another way around would be using view's ajax filters and remove any unwanted option form the select box. I'm still not sure why you are using it, I believe you want to display specific options with the "Lookup candidates by town" select box.

Another way I can think of is select filter offers the option to use "Using manually entered values" for the select box where you can configure the option text/label and option value. Please check the screenshot:
=> hidden link
(But with this option we have known issue and it will be released with the next release but there in no ETA on it)

Here is the errata link:
=> https://toolset.com/errata/choosing-manual-options-for-custom-search-filter-provokes-js-error/

I suggest you should keep using workaround you found if that should help.