[Resolved] How to add autocomplete to Taxonomy lists in Custom Search?

[Author]

Posts

[AtefR7377]

Hi,
I have a large site with more than 500 categories and close to 1000 tags.

I am building a custom search option similar to the Real Estate demo you have.

I have a dropdown list for the categories. however, even though the dropdown list has hundreds of lines, there is no autocomplete option.

You already have autocomplete feature in the backend for the child parent relationship.

so how to achieve the same results as the backend for the post relationships?

something like this:
hidden link

I saw a support forum thread about autocomplete in text fields, but the taxonomy is already predetermined so it should be exactly the same as the post relationship feature you have built in.

here is a test page i created to show the point I am making:
hidden link

can you please help?
Thanks alot

[Nigel]

Hi there

I spoke with the Views developer who confirmed that there is currently no way to add autocomplete to the Views filters.

On the backend we use the select2 library (hidden link), but don't use anything on the front-end filters.

You could add select2 yourself: hidden link

You will need to enqueue the CSS and JS files, and then you can simply initialise select2 on the filter select.

You can see an example in my screenshot (where for testing I have cheated and just added links to the select2 files directly in the filter editor rather than enqueue them, but I recommend you enqueue them properly).

https://developer.wordpress.org/themes/basics/including-css-javascript/

[AtefR7377]

Hi Nigel,

thanks for the quick reply. I have added the select2 library (you can check this by viewing the source of this test page:
hidden link

however, it is not working.

here is my filter section

[wpv-filter-start hide="false"]

[wpv-filter-controls]
<div class="form-group dropdown">
	<label>[wpml-string context="wpv-views"]Categories[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="category" type="select" default_label="-" url_param="wpv-category"]
</div>
[wpv-filter-spinner spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]
[wpv-filter-reset output="bootstrap" class="btn btn-primary"]
[/wpv-filter-controls]
[wpv-filter-end]

and here is the js code i copied from your screenshot:

( function ( $ ) {
	$( document ).ready( function(){
		$('select[name=wpv-category]').select2();

	});
})( jQuery ):

So I modified the code to be just:

jQuery(document).ready(function(){
 jQuery('select[name=wpv-category]').select2();
});

this code works only once. so it shows the select 2 when the post loads, then after I choose a choice from the dropdown list, the dropdown list reverts back to its normal shape.

i verified this on desktop and mobile.

Also, I added an example from the select2 website underneath the WP Types custom search.
when I choose a choice, the dropdown list doesn't revert back to its original shape.

so something happens after the choice in the WP types case. as if when I choose a category, the form resets or so?

can you please test to see the differences on this test page:

hidden link

Thanks heaps for your help.

[Nigel]

The issue here is that you have initialised select2 on an HTML element which is then lost and replaced by the ajax update, and so it needs re-initialising.

That is pretty straight-forward.

You should notice a Front-end events button in the custom JS box of the Filter Editor, where you insert placeholder code for custom events such as when custom search results have been updated.

So you need to initialise select2 on DOM ready, and again with the custom event.