jQuery关键字高亮显示_页面关键词高亮插件
2015-08-19 12:16:35  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 7076
• 0

本Demo是一款jQuery关键词查找元素高亮代码的插件、一款非常实用的搜索框页面查找关键词元素的源代码代码、而且还可以通过用户输入的关键过滤内容、效果非常不错、可以快速集成到自己的搜索界面上面、效果如下

keyup处理

$input.on( ´keyup´, function( e )
{
    if( e.keyCode == 13 ) // enter
    {
        $input.trigger( ´blur´ );
        return true;
    }

    $items.each( function()
    {
        $item = $( this );
        $item.html( $item.html().replace( /<span class="highlight">([^<] )</span>/gi, ´$1´ ) );
    });

    var searchVal = $.trim( $input.val() ).toLowerCase();
    if( searchVal.length )
    {
        for( var i in itemsIndexed )
        {
            $item = $items.eq( i );
            if( itemsIndexed[ i ].indexOf( searchVal ) != -1 )
                $item.removeClass( ´is-hidden´ ).html( $item.html()
                    .replace( new RegExp( searchVal ´(?!([^<] )?>)´, ´gi´ ),
                    ´<span class="highlight">&$amp;</span>´ ) );
            else
                $item.addClass( ´is-hidden´ );
        }
    }
    else $items.removeClass( ´is-hidden´ );

    $notfound.toggleClass( ´is-visible´, $items.not( ´.is-hidden´ ).length == 0 );
});
})( jQuery, window, document );

添加Class代码

;( function( $, window, document, undefined )
{
    var $container = $( ´.faq´ );
    if( !$container.length ) return true;

    var $input = $container.find( ´input´ ),
        $items = $container.find( ´> ul > li´ ),
        $item = $();

    $input.on( ´keyup´, function()
    {
        $item = $items.not( ´.is-hidden´ );
        if( $item.length == 1 )
            $item.addClass( ´js--autoshown is-active´ );
        else
            $items.filter( ´.js--autoshown´ ).removeClass( ´js--autoshown is-active´ );
    });
})( jQuery, window, document );

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjC8Mq5 密码: dbx8

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛