如何在JQuery中进行文本搜索

时间:2015-05-08 09:20:18

标签: jquery

我希望在jQuery中使用过滤数据进行文本搜索。假设我为文本搜索创建了一个输入框。它的名字是try { } catch (ArrayIndexOutOfBoundsException aioobe) { // log here... } 。搜索框下方会显示完整的列表。

searchbox

我插入了sn. name age destination 1 a b test 2 c c test1 3 d d test 4 v v t1 之类的任何文字。根据此关键字test,我的数据显示在底部。我无法使用dataTable。

我尝试过但没有成功

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

请帮助

1 个答案:

答案 0 :(得分:0)

据我了解你的问题,你想在网页上的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代码中,filtersearch是一个文本框,其中将输入搜索数据。如果任何文本在给定的html中匹配。

我希望这会有所帮助。它工作得很好。

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