如何在JQuery中进行文本搜索

I want text search with filter data in jQuery. Suppose I create one input box for text search. Its name is searchbox. A complete List appears below the search box.

我希望在jQuery中使用过滤数据进行文本搜索。假设我为文本搜索创建了一个输入框。它的名字是searchbox。搜索框下方会显示完整的列表。

sn. name age destination
1   a     b   test
2   c     c   test1
3   d     d   test
4   v     v   t1

I insert any text like test. According to this keyword test my data appear in bottom side. I cannot use a dataTable.

我插入任何文本,如测试。根据此关键字测试,我的数据显示在底部。我不能使用dataTable。

I tried this but no success

我试过这个但没有成功

http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/

Please Help

2 个解决方案

#1

As i understand your problem you want to search in html on webpage. We have many options to do this. I am sharing on of these.

据我了解你的问题,你想在网页上的HTML搜索。我们有很多选择。我正在分享这些。

Include jquery on your html page

在你的html页面上包含jquery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Example HTML

<div class="span8 col-md-4">
        <div style="width:329px;" class="span12 col-md-8">
         <div class="row-fluid  expandcollapse">
            <div style="float:left;width:134px;font-weight: normal;">
                <span class="permissionsChecked">    
                    &nbsp;<a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="Process" rel="tooltip">   
                    <input type="checkbox" data-permitted="1" value="1" name="aa" style="margin-left: 10px" checked="checked" for="L1_1" id="L1_1_2">
                    P1
                    </a>
                    <br>    
                    &nbsp;<a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="View" rel="tooltip" >    
                    <input type="checkbox" data-permitted="1" value="4" name="aa" style="margin-left: 10px" checked="checked" for="L1_4" id="L1_4_2">
                        P2</a>
                    <br>    
                    &nbsp;<a style="position:relative; top:-4px; text-decoration:none; color:#000; line-height:32px;" data-original-title="Add">
                        <input type="checkbox" data-permitted="1" value="3" name="aa" style="margin-left: 10px" checked="checked" for="L1_3" id="L1_3_2">
                        P3</a>
                    <br>    
                </span>
            </div>                                                                                                                                                                                                                                                                                                                                                                                                  </div>
        </div>
</div>

Now add this final code for search

现在添加此最终代码进行搜索

$(document).ready(function(){
        $("#filtersearch").keyup(function(){

            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(), count = 0;
            // Loop through the comment list
            $(".permissionsChecked a").each(function(){
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).fadeOut();
            // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });
            // Update the count
            var numberItems = count;
            $("#filter-count").text("Number of Comments = "+count);
        });
    });

In the above javascript code filtersearch is text box in which search data will be entered. If any text matches in given html.

在上面的javascript代码中,filtersearch是一个文本框,其中将输入搜索数据。如果任何文本在给定的html中匹配。

I hope this helps. It working fine a my end.

我希望这有帮助。它工作得很好我的结局。

I created this by using given url by which you tried. http://designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/

我是通过使用您尝试过的给定网址创建的。 http://designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/

#2

Real time table search: jsfiddle DEMO

实时表搜索:jsfiddle DEMO

HTML:

<input id="srch" type="text" placeholder="search" />
<table id="mtable">
    <!-- -->
</table>

CSS:

tr.hide {display: none;}

jQuery:

$('#srch').on('keyup', function() {
    var searchString = $(this).val();
    var trs = $('#mtable tr:gt(0)'); //omitting the first tr (th)
    trs.removeClass('hide');
    if(searchString) {
        var regx = new RegExp(searchString, "i");
        trs.each(function(i, row) {
           var found = false;
            $(row).find('td').each(function(j, cell) {
                if(regx.test($(cell).text())) {
                    found = true;
                    return false;
                }
            });
            if (found === true)
                $(row).removeClass('hide');
            else
                $(row).addClass('hide');
        });
    }
});

#1