I unhook the
wp_underscore_playlist_templates()
function and create
my own versionprefix_wp_underscore_playlist_templates()
You should first get back to or restore the default playlist template. (i.e. Hook back to wp_underscore_playlist_templates()
.)
Add then add this somewhere in the theme’s main functions.php file:
add_action( 'wp_playlist_scripts', function(){
?>
<script>
jQuery( function( $ ){
// Add the search box.
$( '.wp-playlist' ).prepend(
'<p class="wp-playlist-custom-search alignright">' +
'<input class="search-playlist" placeholder="Search" />' +
'</p>' +
'<div style="clear: both;"></div>'
);
// Performs the search.
$( '.search-playlist', '.wp-playlist' ).on( 'keyup', function( e ){
var $playlist = $( this ).closest( '.wp-playlist' ),
query = this.value;
if ( ! query ) {
$( '.wp-playlist-item', $playlist ).show();
return;
} else if ( e.key.length > 1 ) {
return;
}
$( '.wp-playlist-item-title', $playlist ).each( function(){
var re = new RegExp( '(' + query + ')', 'ig' ),
title = $( this ).text();
if ( re.test( title ) ) {
$( this ).closest( '.wp-playlist-item' ).show();
} else {
$( this ).closest( '.wp-playlist-item' ).hide();
}
} );
} );
} );
</script>
<?php
} );
You’d get a search box that looks something like:
And this, upon searching: