1

该插件使用正则表达式根据您的搜索输入对内容进行实时排序。现在脚本正在搜索您键入的内容。

这是代码：

$.fn.simpleContentSearch = function ( options ) {

var settings = {
    'active'    : 'active',
    'normal'    : 'normal',
    'searchList' : 'searchable tr',
    'searchItem' : 'td',
    'effect' : 'none' // fade, none
};

var base = this;
var options = $.extend(settings, options);

function startSearching(query)
{
    $( '.' + settings.searchList ).each(function () 
    {
        $(this).children( settings.searchItem ).each(function () 
        {
            var elem = $(this);

            if (!elem.html().match(new RegExp('.*?' + query + '.*?', 'i'))) {

                if( settings.effect == 'fade' ){
                    $(this).parent( '.' + settings.searchList ).fadeOut();
                } else {
                    $(this).parent( '.' + settings.searchList ).hide();
                }

            } else {

                if( settings.effect == 'fade' ){
                    $(this).parent( '.' + settings.searchList ).fadeIn();
                } else {
                    $(this).parent( '.' + settings.searchList ).show();
                }

                return false;
            }

            return;
        });
    });
}

return this.each(function() {    

    // On Blur
    base.blur(function () 
    {
        var elem = base;
        elem.removeClass().addClass(options.normal);
    });

    // On Focus
    base.focus(function () 
    {
        var elem = base;
        elem.removeClass().addClass(options.active);
    });

    //Keyup
    base.keyup(function () 
    {
        startSearching(base.val());
    });

    return this;

});

}

我想要做的是创建几个按钮，例如：“text1”“text2”，当您单击它们以搜索“text1”而无需键入它时。关于如何做到这一点的任何建议？这就是脚本的工作方式：jsfiddle

谢谢！

4

3 回答 3

2

我分叉了你的小提琴并添加了你要求的功能。 http://jsfiddle.net/acturbo/PRNWe/2/

jQuery

  $().ready(function() {
       console.clear();

        $('.searchFilter').simpleContentSearch({
            'active' : 'searchBoxActive',
            'normal' : 'searchBoxNormal',
            'searchList' : 'searchable tr',
            'searchItem' : 'td'
        });

       $(".search-btn").on("click", function(){
           $("#searchbox").val( $(this).data("search") );
           $('.searchFilter').keyup();
       });             
       $(".search-reset").on("click", function(){
           $("#searchbox").val( "");
           $('.searchFilter').keyup();
       });             

    });

html编辑

<!-- Seach Box -->
        <input id="searchbox" type="text" class="searchFilter" onblur="if(this.value == '')this.value='Keyword(s)'" onfocus="this.value==this.defaultValue?this.value='':null" value="Keyword(s)" name="keyword">

            <a href="#" class="search-btn" data-search="text1 ">search 1</a>
            <a href="#" class="search-btn" data-search="intro ">search 2</a>
            <a href="#" class="search-reset">reset</a>
于 2013-05-09T17:54:59.550 回答
1

您可以将搜索框的值设置为您想要自动搜索的值，然后调用它的keyup()事件来强制它搜索。

例如，您可以创建这样的输入：

<input type="button" value="Intro" class="searchButton">

然后$(document).ready()您可以将以下函数绑定到单击事件：

$('.searchButton').click(function (eventObject) {
    $('.searchFilter').val(eventObject.target.value).keyup();
});

这将自动搜索您在按钮value属性中列出的术语。

这是一个工作示例：http: //jsfiddle.net/gvH77/

于 2013-05-09T18:01:32.720 回答
0

我在 CodeCanyon 上找到了它，它要么正是您所需要的，要么就是您最终从这个问题的答案中得到的结果： http ://codecanyon.net/item/simple-content-search/1850151?ref=arctic_ark

于 2015-06-22T17:35:47.050 回答