filtre de nuage de tags

Question

J'ai un div qui contient de nombreuses travées et chacune de ces travées contient un seul href.

Fondamentalement, c'est un nuage de tags. Ce que je voudrais faire est d'avoir une zone de texte qui filtre le nuage de tag sur l'événement KeyUp.

Des idées ou est-ce possible?

Question mise à jour: Quelle serait la meilleure façon de réinitialiser la liste pour recommencer la recherche?

Answer 1

Fondamentalement, ce que vous voulez faire est quelque chose comme ça

$('#myTextbox').keyup(function() { 
    $('#divCloud > span').not('span:contains(' + $(this).val() + ')').hide(); 
}); 

Answer 2

Cela peut sans doute être amélioré et allégé mais cela donne au moins la fonctionnalité de pouvoir masquer plusieurs étiquettes par seperating votre entrée par des virgules. Par exemple: entering this, that, something dans l'entrée masquera chacune de ces plages.

Demo HTML:

<div id="tag_cloud"> 
    <span>this</span> 
    <span>that</span> 
    <span>another</span> 
    <span>something</span> 
    <span>random</span> 
</div> 

<input type="text" id="filter" /> 

Demo jQuery:

function oc(a){ 
    var o = {}; 
    for(var i=0;i<a.length;i++){ 
     o[a[i]]=''; 
    } 

    return o; 
} 

$(function(){ 
    $('#filter').keyup(function(){ 
     var a = this.value.replace(/ /g,'').split(','); 

     $('#tag_cloud span').each(function(){ 
      if($(this).text() in oc(a)){ 
       $(this).hide(); 
      } 
      else { 
       $(this).show(); 
      } 
     }) 
    }) 
})