[Resolved] Add select2 as filter in View

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I know how to format a generic select field to a select2 element, can I do the similar in View?

I combine the post title with its child post data as the option value, below is the code I need to build the select2

    $args = array(
        'post_type'        => 'acupuncture-point',
        'posts_per_page'   => -1,
        'post_status'      => 'publish',
        'orderby'          => 'title'
    );
 
    $posts_array = get_posts( $args );
 
    $output = '';
 
    foreach ($posts_array as $post) {
        $meridian = types_render_field("meridian", array( "item" => $post->ID));
        $output .= sprintf('{"value": "%s", "label": "%s - %s"},', $post->ID, $meridian, $post->post_title);
    }
 
    return rtrim($output, ',');

Please refer to the screenshot as my expected outcome.

[Luo Yang]

Hello,

There isn't such kind of built-in feature, you can consider to create a custom shortcode for it, for example:
1) Create a custom shortcode, and output it to generic select field HTML element:
https://developer.wordpress.org/reference/functions/add_shortcode/

2) Then put above shortcode into Views search form.

[kelvinL-2]

Dear Luo Yang,

I built the select with below code

function func_get_acupuncture_point_list() {
 
    $args = array(
        'post_type'         => 'acupuncture-point',
        'posts_per_page'    => -1,
        'post_status'       => 'publish',
        'orderby'           => array('meta_value_num'),
        'meta_key'          => 'wpcf-meridian'
    );
 
    $posts_array = get_posts( $args );
 
    $output = '<select name="apid" id="apid">';
 
    foreach ($posts_array as $post) {
        $meridian = types_render_field("meridian", array( "item" => $post->ID));
            $output .= sprintf("<option value='%s'>%s - %s", $post->ID, $meridian, $post->post_title);
    }
    $output .="</select>";
    return rtrim($output, ',');
 
}
add_shortcode('get_acupuncture-point_list', 'func_get_acupuncture_point_list');

I also add the Javascript

jQuery(document).ready(function() {
    jQuery('select[name="apid"]').toolset_select2();
});

It doesn't work but I do the same in Toolset Post Form, it works, what kind of javascript library not be loaded in View but only in Form?

You can view my page from here hidden link

[Luo Yang]

You need to load the Toolset JS file in frontend, for example, add below codes into your theme file "functions.php":

wp_enqueue_script( 'views-utils-script' );