Databases
StackOverflow2013
Postsdbo
POjQuery .search initial div showing list item - shouldn't
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery .search initial div showing list item - shouldn't
    text
    copied!<p>I need to search four tables and display the results in four DIVs. Fundamentally, it's working. But, I need the divs to be empty, initially. I loop through the LI elements and hide or show based on the search results. The only thing that seems to work is to initially show an empty DIV with style="display:none". I tried using $(".messagelistdiv div").hide(); but the .show method doesn't work.</p> <p>If the search filter is blank, I don't want to show anything. As I type, the qualifying items need to show.</p> <pre><code>&lt;script type="text/javascript" language="JavaScript"&gt; 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) &lt; 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) &lt; 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) &lt; 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) &lt; 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); } }); }); &lt;/script&gt; &lt;form id="live-search" action="" class="styled" method="post"&gt; &lt;fieldset&gt; &lt;input type="text" class="text-input" id="filter" value="" /&gt; &lt;/fieldset&gt; &lt;cfinvoke component="services.search" method="getMessages" Search_Phrase="" returnvariable="QMessages" /&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt; &lt;div id="messagefiltercount"&gt; &lt;/div&gt; &lt;div class="messagelistdiv" &gt; &lt;ol class="messagelist list-group"&gt; &lt;cfoutput query="QMessages"&gt; &lt;li class="list-group-item"&gt; &lt;a href="/site-search/site-search-results?id=#QMessages.id#"&gt; #QMessages.subject# &lt;/a&gt; &lt;/li&gt; &lt;/cfoutput&gt; &lt;/ol&gt; &lt;/div&gt; &lt;/div&gt; &lt;cfinvoke component="services.search" method="getArticles" Search_Phrase="" returnvariable="QArtilces" /&gt; &lt;div class="span4"&gt; &lt;div id="articlefiltercount"&gt; &lt;/div&gt; &lt;div class="articlelistdiv" &gt; &lt;ol class="articlelist list-group"&gt; &lt;cfoutput query="QArtilces"&gt; &lt;liclass="list-group-item"&gt; &lt;a href="/site-search/site-search-results?id=#QArtilces.id#"&gt; #QArtilces.subject# &lt;/a&gt; &lt;/li&gt; &lt;/cfoutput&gt; &lt;/ol&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;cfinvoke component="services.search" method="getVideos" Search_Phrase="" returnvariable="QVideos" /&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt; &lt;div id="Videosfiltercount"&gt; &lt;/div&gt; &lt;div class="Videolistdiv" &gt; &lt;ol class="Videolist list-group"&gt; &lt;cfoutput query="QVideos"&gt; &lt;liclass="list-group-item"&gt; &lt;a href="/site-search/site-search-results?id=#QVideos.id#"&gt; #QVideos.subject# &lt;/a&gt; &lt;/li&gt; &lt;/cfoutput&gt; &lt;/ol&gt; &lt;/div&gt; &lt;/div&gt; &lt;cfinvoke component="services.search" method="getSurveyReports" Search_Phrase="" returnvariable="QSurveyReports" /&gt; &lt;div class="span4"&gt; &lt;div id="SurveyReportsfiltercount"&gt; &lt;/div&gt; &lt;div class="Surveylistdiv" &gt; &lt;ol class="SurveyReportslist list-group"&gt; &lt;cfoutput query="QSurveyReports"&gt; &lt;liclass="list-group-item"&gt; &lt;a href="/site-search/site-search-results?id=#QSurveyReports.id#"&gt; #QSurveyReports.subject# &lt;/a&gt; &lt;/li&gt; &lt;/cfoutput&gt; &lt;/ol&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload