How to search titles/artist/album within a playlist, and only lists the results that match?

I am creating a simple audio WordPress theme, and have a playlist being rendered in the front page using short-code [playlist ids="29,30,31,32,33,34]". How to list only the songs with title (or artist) that matches the text inside an input?

After days of research I came up with this method where I unhook the wp_underscore_playlist_templates() function and create my own version prefix_wp_underscore_playlist_templates(). Afterwards I use jQuery to check if data.title contains the search string. This correctly lists only the items that match the query, but it doesn't playback them correctly. If the search filters only 3 results out of 6, and you click in the 3rd filtered result, it will playback the song that it was originally in the 3rd position. Although the un-matched wp-playlist-item is not being added to the list, somehow still it exists in the memory of playback. I am also a designer, and partly a developer so forgive my approach to this solution.

    script type="text/html" id="tmpl-wp-playlist-item"
     # if (data.title.toLowerCase().indexOf("SEARCH QUERY HERE") = 0) { #
            div class="wp-playlist-item"
                    a class="wp-playlist-caption" href="{{ data.src }}" 
                            {{ data.index ? ( data.index + '. ' ) : '' }}

                                    span class="wp-playlist-item-title"{{{ data.title }}}/span
                                    # if ( data.artists  data.meta.artist ) { #
                                    span class="wp-playlist-item-artist" — {{ data.meta.artist }}/span
                                    # } #

                    /a
                    # if ( data.meta.length_formatted ) { #
                    div class="wp-playlist-item-length"{{ data.meta.length_formatted }}/div
                    # } #
            /div

    # } #
    /script

Topic playlist title Wordpress search

Category Web

1
answered at

I unhook the wp_underscore_playlist_templates() function and create my own version prefix_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:

enter image description here

And this, upon searching:

enter image description here

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.