Question

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

这是代码：

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

谢谢！

Answer 1

我分叉你的小提琴，并添加了你要求的功能。 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>

Answer 2

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

例如，您可以创建如下输入：

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

然后在$(document).ready()中，您可以将以下函数绑定到click事件：

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

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

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

Answer 3

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

基于关键字的jquery即时搜索

3 个答案: