0

我需要搜索四个表并在四个 DIV 中显示结果。从根本上说，它正在发挥作用。但是，最初我需要 div 为空。我遍历 LI 元素并根据搜索结果隐藏或显示。似乎唯一可行的方法是最初显示一个带有 style="display:none" 的空 DIV。我尝试使用 $(".messagelistdiv div").hide(); 但 .show 方法不起作用。

如果搜索过滤器为空，我不想显示任何内容。当我键入时，需要显示符合条件的项目。

<script type="text/javascript" language="JavaScript">

    jQuery( document ).ready(function($) {

     $(".messagelistdiv div").hide();
     $(".articlelistdiv div").hide();
     $(".Videolistdiv div").hide();
     $(".Surveylistdiv div").hide();

    $('#filter').keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), messagecount = 0, articlecount = 0, videocount = 0, surveycount = 0;
        if($.trim(filter)==''){ // hide is no text
            //$(".messagelistdiv div").hide();
            //$(".articlelistdiv div").hide();
            //$(".Videolistdiv div").hide();
            //$(".Surveylistdiv div").hide();
            return;
        }

        else {

        var regex = new RegExp(filter, "i"); // Create a regex variable outside the loop statement

     // Loop through the messages list
        $(".messagelist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0 || $.trim(filter)=='') { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                messagecount++;
                $(".messagelistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = messagecount;
        $("#messagefiltercount").html("Number of Messages = " + numberItems);

     // Loop through the articles list
        $(".articlelist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                articlecount++;
                $(".articlelistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = articlecount;
        $("#articlefiltercount").html("Number of Articles = " + numberItems);

    // Loop through the video list
        $(".Videolist li").each(function(){ 

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                videocount++;
                $(".articlelistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = videocount;
        $("#Videosfiltercount").html("Number of Videos = " + numberItems);

     // Loop through the survey list
        $(".SurveyReportslist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                surveycount++;
                $(".Surveylistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = surveycount;
        $("#SurveyReportsfiltercount").html("Number of Surveys/Reports = " + numberItems);
        }
    });
    });
</script> 
<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
    </fieldset>
    <cfinvoke component="services.search" method="getMessages" Search_Phrase="" returnvariable="QMessages" />
    <div class="row">
        <div class="span4">
            <div id="messagefiltercount">
            </div>
            <div class="messagelistdiv" >
                <ol class="messagelist list-group">
                    <cfoutput query="QMessages">
                        <li class="list-group-item">
                            <a href="/site-search/site-search-results?id=#QMessages.id#">
                                #QMessages.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
        <cfinvoke component="services.search" method="getArticles" Search_Phrase="" returnvariable="QArtilces" />
        <div class="span4">
            <div id="articlefiltercount">
            </div>
            <div class="articlelistdiv" >
                <ol class="articlelist list-group">
                    <cfoutput query="QArtilces">
                        <liclass="list-group-item">
                            <a href="/site-search/site-search-results?id=#QArtilces.id#">
                                #QArtilces.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
    </div>
    <cfinvoke component="services.search" method="getVideos" Search_Phrase="" returnvariable="QVideos" />
    <div class="row">
        <div class="span4">
            <div id="Videosfiltercount">
            </div>
            <div class="Videolistdiv" >
                <ol class="Videolist list-group">
                    <cfoutput query="QVideos">
                        <liclass="list-group-item">
                            <a href="/site-search/site-search-results?id=#QVideos.id#">
                                #QVideos.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
        <cfinvoke component="services.search" method="getSurveyReports" Search_Phrase="" returnvariable="QSurveyReports" />
        <div class="span4">
            <div id="SurveyReportsfiltercount">
            </div>
            <div class="Surveylistdiv" >
                <ol class="SurveyReportslist list-group">
                    <cfoutput query="QSurveyReports">
                        <liclass="list-group-item">
                            <a href="/site-search/site-search-results?id=#QSurveyReports.id#">
                                #QSurveyReports.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
    </div>
</form>
4

1 回答 1

1

像这样的元素没有div死者.messagelistdiv，这就是它不起作用的原因，相反，您可以隐藏/显示messagelistdiv元素

$(".messagelistdiv").hide();

和

$(".messagelistdiv").fadeIn(1000);
于 2013-09-10T03:10:34.613 回答