Jquery即时搜索基于关键字

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()中，您可以将以下函数绑定到单击事件:

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