Chosen js or Select2 javascript for multiselect box

Hello amkh,

You can customize the form template you are using.

Edit the template of your choice, add the wp_enqueue_script() function to enqueue the Chosen or Select2 script, and add the inline JavaScript to change the plain multiselect to the enhanced type.

Make sure you move the modified template to the ‘buddypress/members’ directory in your theme’s root, otherwise it will be overwritten during the next BP Profile Search update.

PS: if you are not a developer and need step-by-step instructions, please let me know and I’ll try to provide them as soon as I have some available time.

I am a beginner and don’t have much experience. So it would be great if you can give me step by step instructions.

Got it. I’ll post the instructions here as soon as I have a chance to test them.

actually i tried to do it myself and this is the code i’ve added to the template file.

function enqueue_select2_jquery() {
wp_register_script( ‘select2jquery’, ‘https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js’,array(‘jquery’), null, true );
wp_register_style( ‘select2mincss’, ‘https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css’ );
wp_enqueue_style( ‘select2mincss’ );
wp_enqueue_script( ‘select2jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_select2_jquery’ );
<script type=”text/javascript”>
$(document).ready(function($) {
$(‘multiselectbox’).select2();
});
</script>

However once i add it the page does not load. Can you tell me what i am doing wrong?

Hi,

If the page doesn’t load, you should get some errors in your error log or in the browser’s console. Could you please post them here?

If you don’t see any errors, change WP_DEBUG to true in your wp-config.php file.

It gives me this error in the console:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

and when i try to debug i get the following message

Parse error: syntax error, unexpected ‘:’ in …/buddypress/members/bps-form-sample-1.php on line 12 Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in …/wp-includes/functions.php on line 3743

• This reply was modified 6 years, 2 months ago by amkh.

I’m trying to reproduce this on my system, I’ll keep you informed.

Hi @amkh,

I found a way to make it work. If you are using the bps-form-legacy template, open the file bps-form-legacy.php, locate the initial lines:

	$F = bps_escaped_form_data ();

	$toggle_id = 'bps_toggle'. $F->id;

and replace them with:

	$F = bps_escaped_form_data ();

	wp_enqueue_script ('select2-js', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js', array ('jquery'));
	wp_enqueue_style ('select2-css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css');
?>
<script>
	jQuery(document).ready(function($) {
		$('.bps_form select').select2();
	});
</script>
<?php

	$toggle_id = 'bps_toggle'. $F->id;

Hope this helps!

• This reply was modified 6 years, 2 months ago by Andrea Tarantini.

it works!! thanks a lot

Great! You are welcome.