afficher "aucun résultat trouvé" après la recherche

Question

Je suis un novice de jQuery mais j'ai pu utiliser quelques scripts que j'ai trouvés pour obtenir les résultats que je veux, avec une exception. La page sur laquelle je travaille a 4 menus déroulants qui permettent à l'utilisateur de faire une sélection à partir de chaque menu, puis cliquez sur un bouton de soumission qui renvoie les résultats d'une liste.

Actuellement si vous faites quelques sélections et rien si trouvé, vous obtenez seulement une page blanche. Je dois afficher "Aucun résultat trouvé". Quelques scripts que j'ai vus ici m'obligeraient à réécrire ce que j'ai, mais je pense qu'il existe une solution simple. Sinon, c'est de retour au clavier pour moi.

Voici le code sur jsFiddle: http://jsfiddle.net/LbUfe/

est le script ici que je utilise pour faire les sélections.

<script type="text/javascript">  
     $(document).ready(function() 
     {    
      $("#btnFilter").click(function() 
      { 
       var portfolio = $("#portfolio").val(); 
       var strategy = $("#strategy").val(); 
       var geoFocus = $("#geoFocus").val(); 
       var spendType = $("#spendType").val(); 
       var portfolioSelector = ''; 
       var strategySelector = '';  
       var geoFocusSelector = ''; 
       var spendTypeSelector = ''; 

       if (portfolio == "all" && strategy == "all" && geoFocus == "all" && spendType == "all")      
       { 
        //show all items in list - working 
        $(".item").show(); 
       } 

       else 
       { 
        if (strategy != "all") 
        { 
         strategySelector = '.' + strategy 
        } 

        if (portfolio != "all") 
        { 
         portfolioSelector = '.' + portfolio 
        } 
        if (geoFocus != "all") 
        { 
         geoFocusSelector = '.' + geoFocus 
        } 
        if (spendType != "all") 
        { 
         spendTypeSelector = '.' + spendType 
        } 
        $(".item").hide(); 
        $(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show(); 
        } 

      }); 

     }); 

Voici la page de travail (moins le "Aucun résultat trouvé").

http://staging.humanityunited.org/

Un exemple rapide: sélectionnez le menu 'Bangladesh' dans le menu 'Mise au point géographique de, et 'parrainage' pour 'Type de dépenses' et cliquez sur soumettre. Vous obtiendrez une page blanche.

Answer 1

Vous pouvez ajouter un contrôle pour voir combien de l'élément de liste sont visibles.

var visibleElements = $('#colRight li:visible').length; 

http://jsfiddle.net/LbUfe/5/

Answer 2

Comme je peux le voir dans votre HTML, tous les résultats possibles ont un .item de classe. Par conséquent, si aucun élément n'est affiché, cela signifie qu'il est temps d'imprimer le message "aucun résultat trouvé". Vous pouvez y parvenir en jQuery:

if($('li.item:visible').length===0)) // no item visible 
{ 
    // put code here to display your message 
} 

Answer 3

Essayez de changer

$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show(); 

à

var $res = $(strategySelector + "," + portfolioSelector + "," + geoFocusSelector + "," + spendTypeSelector).show(); 
if ($res.length == 0) { 
    $res.html("No results found"); 
} 

$res.show(); 

(Updated fiddle)

Il semble que votre problème est que vous nous re ajout de tous ces sélecteurs pour que seules les choses avec TOUS ces sélecteurs soient affichées. Ergo, j'ai ajouté des comas entre les sélecteurs.

Answer 4

Je pense que cela vaut mieux

var ItemsCount=$(strategySelector + portfolioSelector + geoFocusSelector + spendTypeSelector).show().length; 
if(ItemsCount= 0) 
{ 
    //show your message 
}