如何在播放列表中搜索标题/艺术家/专辑,并只列出匹配的结果?

时间:2018-04-16 作者:greg

我正在创建一个简单的音频WordPress主题,并在首页使用短代码[播放列表ID=“29,30,31,32,33,34]”呈现一个播放列表。如何仅列出标题(或艺术家)与输入中的文本匹配的歌曲?

经过几天的研究,我想出了这个方法wp_underscore_playlist_templates() 函数并创建我自己的版本prefix_wp_underscore_playlist_templates(). 之后,我使用jQuery检查data.title 包含搜索字符串。这将仅正确列出与查询匹配的项目,但不会正确播放它们。如果搜索只过滤6个结果中的3个,并且您单击第3个过滤结果,它将播放原来位于第3个位置的歌曲。虽然不匹配wp-playlist-item 没有被添加到列表中,但不知何故它仍然存在于回放的内存中。我也是一名设计师,同时也是一名开发人员,所以请原谅我使用此解决方案的做法。

    <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>

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

我解开钩子wp_underscore_playlist_templates() 函数并创建我自己的版本prefix_wp_underscore_playlist_templates()

您应该首先返回或还原默认播放列表模板。(即钩回至wp_underscore_playlist_templates().)

添加然后将其添加到主题的主要功能中的某个位置。php文件:

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
} );
您将得到一个类似以下内容的搜索框:

enter image description here

在搜索时:

enter image description here

结束

相关推荐

Insert ads below the title

我正在为插入广告创建插件。我想在标题下插入广告。我用的是主题MH Magazine Lite我的插件是这样做的:function diww_pre_content($content) { $pre_content = \'ads_up\'; $pre_content .= $content; return $pre_content; } add_filter( \'the_content\', \'diww_pre_con