Support for select2 ajax

[jtsternberg]

With select2, you can populate options via an ajax search vs providing all the options inline via an object. Any thoughts on updating this lib to allow that?

[mustardBees]

@jtsternberg I’m not going to lie, it’s something I’ve thought about… I’m not sure how the implementation would look. It would be ideal in situations where loading a massive options array would be prohibitively expensive. Coming up with something generic would be tough. It sounds more like passing in a callback function which handles the AJAX request which in turn searches a dataset. There are the obvious common use cases, searching posts/terms which could be out of the box. Not sure if I’m overthinking this? Be interested in hearing your thoughts.

[jtsternberg]

Yep, my thought would be an ajax callback, similar to the native CMB2 'options_cb' parameter, which requires you to pass back an array of key/values. This would enable something like this for a taxonomy:

$cmb->add_field( array(
    'name'       => 'Ingredients',
    'id'         => $prefix . 'ingredients',
    'desc'       => 'Select ingredients. Drag to reorder.',
    'type'       => 'pw_multiselect',
    'taxonomy'   => 'cooking_ingredients',
    'options'    => array(), // let's use ajax instead.
    'ajax_cb'    => 'your_prefix_get_cooking_ingredients',
    'attributes' => array(
        'data-maximum-selection-length' => '2',
    ),
) );

...

function your_prefix_get_cooking_ingredients( $search_term, $field ) {
    // if there is no search string, bail here
    if ( empty( $search_term ) ) {
        return;
    }

    $taxonomy = $field->args( 'taxonomy' );

    // add our term clause filter for this iteration
    add_filter( 'terms_clauses', 'your_prefix_wilcard_term_name' );

    // do term search
    $terms = get_terms( $taxonomy, array(
        'number' => 10,
        'hide_empty' => false,
        'name__like' => sanitize_text_field( $search_term ),
        'cache_domain' => 'your_prefix_search_' . $taxonomy,
    ) );

    // and remove the filter
    remove_filter( 'terms_clauses', 'your_prefix_wilcard_term_name' );

    // if we didn't find any terms, bail
    if ( empty( $terms ) ) {
        return;
    }

    $results = array();
    foreach ( $terms as $term ) {

        $name = $term->name;

        if ( $term->parent && ( $parent_term = get_term_by( 'id', $term->parent, $taxonomy ) ) ) {
            $name = $parent_term->name .' / ' . $name;
        }

        $results[ $term->slug ] = $name;
    }

    return $results;
}

/**
 * Make term search wildcard on front as well as back
 */
function your_prefix_wilcard_term_name( $clauses ) {

    // add wildcard flag to beginning of term
    $clauses['where'] = str_replace( "name LIKE '", "name LIKE '%", $clauses['where'] );
    return $clauses;
}

[mbucurcf]

You can achieve an AJAX search by using data-* attributes:

cmb->add_field( array(
	'name' => 'name'
	'id' => 'id',
	'type' => 'pw_multiselect',
	'select_all_button' => true,
	'remove_default' => 'true',
	'options' => array(),
	'attributes' => array(
		'data-ajax--url' => admin_url( 'admin-ajax.php?action=your_action' ),
		'data-ajax--cache' => 'true',
		'data-ajax--delay' => 300,
		'data-close-on-select' => 'false',
		'data-minimum-input-length' => 3,
	),
) );

See https://select2.org/configuration/data-attributes

You would then need to build the options array with the selected options.

[cindyhont]

The jquery of wordpress v4.9 is v1.12.4
data-* attributes doesn't work in such case

https://github.com/select2/select2/issues/2969

[yuriy-dev]

You can achieve an AJAX search by using data-* attributes:

cmb->add_field( array(
	'name' => 'name'
	'id' => 'id',
	'type' => 'pw_multiselect',
	'select_all_button' => true,
	'remove_default' => 'true',
	'options' => array(),
	'attributes' => array(
		'data-ajax--url' => admin_url( 'admin-ajax.php?action=your_action' ),
		'data-ajax--cache' => 'true',
		'data-ajax--delay' => 300,
		'data-close-on-select' => 'false',
		'data-minimum-input-length' => 3,
	),
) );

See https://select2.org/configuration/data-attributes

You would then need to build the options array with the selected options.

Hi,
I've implemented ajax call as suggested above. It works fine.
But I'm not sure how to build options array once I got ajax respond.
From documentation it is not clear how to do it.
Can anybody advice how to do it?