我需要搜索四个表并在四个DIV中显示结果。从根本上说,它正在发挥作用。但是,我最初需要div为空。我遍历LI元素并根据搜索结果隐藏或显示。唯一可行的方法是最初显示一个空的DIV,其中style =“display:none”。我尝试使用$(“。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>
答案 0 :(得分:1)
div
这样的元素没有.messagelistdiv
后代,这就是为什么它不起作用,而是可以隐藏/显示messagelistdiv
元素
$(".messagelistdiv").hide();
和
$(".messagelistdiv").fadeIn(1000);