如何在JQuery中进行文本搜索

Question

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

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

我插入任何像test这样的文本。根据这个关键字test，我的数据出现在底部。我不能使用dataTable。

我试过了，但没有成功。

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

请帮帮忙

Answer 1

据我所知你的问题是你想在网页上搜索html。我们有很多选择可以做到这一点。我正在分享其中的一些。

在html页面上包含jquery

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

示例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>

现在添加用于搜索的最终代码

$(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);
        });
    });

在上面的javascript代码过滤器中，search是一个文本框，可以在其中输入搜索数据。如果在给定的html中有任何文本匹配。

我希望这能帮到你。它在我这一端工作得很好。

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

Answer 2

实时表搜索：

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');
        });
    }
});