[Resolved] add a text search as the top item in a dropdown search

[Author]

Posts

[emilyB-2]

Tell us what you are trying to do?
Hello,

I am making a view to list a post type psychologists. I have a dropdown list of views that are the services the psychologists offer, but the list is pretty long. I am trying to create a text search that will change the populated dropdown filter to include just items related to the search.

as well if it's possible, i would like to make the first item in the dropdown menu the search box.

I was trying to make my own custom filter but I can't find where the filter functions are defined to use as my base. if you could point me to that direction too that would help
Is there any documentation that you are following?

[Shane]

Hi Emily,

Thank you for getting in touch.

One of the ways I see this possible is to make use of the select2 options.
hidden link

However in order to use this we will need to enqueue the scripts for it.

Firstly you will need to add the following to your site in the Toolset custom code section at Toolset ->Settings-> Custom Code and activate it once added.

 wp_register_style( 'select2', '<em><u>hidden link</u></em>' );
wp_enqueue_style('select2');

wp_register_script( 'select2js', '<em><u>hidden link</u></em>', null, null, true );
wp_enqueue_script('select2js');

Secondly you will need to add the following to your view in the JS section.

jQuery(document).ready(function() {
   jQuery('#wpv_control_select_wpcf-artist-id').select2();

});

Where you will replace the "wpcf-artist-id" section of the select id with the full slug of your custom field. So the full format should look like.

#wpv_control_select_wpcf-{field-slug}

Please let me know if this helps or if you have any difficulties implementing it as I was able to successfully get it to work on my end.

Thanks,
Shane

[emilyB-2]

that worked perfectly, instead of :

jQuery('#wpv_control_select_wpcf-artist-id').select2();
I put
jQuery('#wpv_control_select_wpv-services-filter').select2(); and then it ran.

the last thing is I actually would like to use the Multi-select boxes (pillbox) instead of the select2.

do you know where I can get the custom code for that?

Thanks for the help

[Shane]

Hi Emily,

Happy I was able to assist you. For this you will need to change the field type to a Multiple, see screenshot

You same exact code should trigger again to change it to a pillbox multiselect with the search as well.

Thanks,
Shane

[emilyB-2]

hello again,

so the multiple selection lists the contents but doesn't have a place for the pill box items that were selected to go to.

here is the normal select2
https://toolset.com/wp-content/uploads/tmp/select_1.png
and here is the multi-select
https://toolset.com/wp-content/uploads/tmp/multi_select.png

as you can see, the text search bar is gone when selecting multiple.
any ideas?

[emilyB-2]

ahh so i forgot to add one detail, the specialization was a second many-to-many relationship filter after the first, services. so I had to put in 2 custom filters, with the code below:

// creating a second filter function for many to many relationships between psychologists and services

add_filter( 'wpv_filter_query', 'filter_by_parent_services_func',999,3);

function filter_by_parent_services_func( $query_args, $view_settings, $view_id ) {
if ( $view_id == 10200 && isset($_GET['wpv-services-filter'])) {
if(!isset($query_args['toolset_relationships'])){
$query_args['toolset_relationships'] = array();
}
$query_args['toolset_relationships'][] = array(
'role' => 'child',
'related_to' => $_GET['wpv-services-filter'],
'relationship' => 'psychologist-therapy-format'
);
}
return $query_args;
}

add_filter('wpv_filter_register_url_parameters_for_posts', 'add_extra_url_param_func', 10, 2);
function add_extra_url_param_func($attributes, $view_settings){

if($view_settings['view_id'] == 10200){
$attributes[] = array(
'query_type'=> 'posts',
'filter_type'=> 'post_relationship',
'value'=> 'custom_field_value',
'attribute'=> 'wpv-services-filter',
'expected'=> 'number',
);

}
return $attributes;
}

when i used the multi-select on the languages filter, which is a custom field, it worked. although, there wasn't a drop down menu that appeard, it was just a bubble and when i clicked on it there was a drop down menu

[Shane]

Hello,

Based on your screenshots in the post below I can see that it works.
https://toolset.com/forums/topic/add-a-text-search-as-the-top-item-in-a-dropdown-search/#post-1963231

However i'm not sure of the message. Is it that it works with only the custom fields but not with the relationship field ?

Please provide a little more clarity on this so that I can understand better the exact issue that we are at. Also note that this is custom code as well so my assistance here is limited.

Finally if you're able to please send a link to the search so that I can see what it looks like on the frontend and which filters you are having issues with.

Thanks,
Shane

[emilyB-2]

hey shane,

so the dropdown works for multi-select with a custom view filter. but it doesn't work with multi select for the many-to-many, wpv-control-post-relationship filters.

here is the site to see: hidden link

it just does what a normal multi-select dropdown will look like, not the multiple select2 dropdown.

[Shane]

Hello,

I did a quick test on my end with a relationship field and it works fine.

Taking a look at the link you provided it seems to be behind a private server.

Could you send the credentials for this so that I can have a look at the page that you've sent?

Thanks,
Shane

[emilyB-2]

I forgot, I guess I should tell you the view we are working on is list all psychologists

[Shane]

Hello,

Did you use the correct ID for the relationship filter, because when I applied the correct ID to the code the filter changed to the searchable on, see screenshot.

The line of code that was used was

jQuery('#wpv_control_multi-select_wpv-relationship-filter').select2();

You code's id needs to change for each filter you want to become a searchable filter and in the case of the relationship filter the ID changes when you set it to a multi select.

Please let me know if this helps.
Thanks,
Shane

[emilyB-2]

My issue is resolved now. You helped make our website that much better. Thank you!