標籤雲過濾器

Question

我有一個包含許多跨度的div，並且每個跨度都包含一個href。

基本上它是一個標籤雲。我想要做的是在KeyUp事件中過濾標籤雲的文本框。

任何想法或這是可能的嗎？

更新的問題：重置列表以重新開始搜索的最佳方式是什麼？

Answer 1

基本上，你想要做的是這樣的

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

Answer 2

這可能可以在改進和輕量化，但這至少給了能夠通過分隔條件您輸入隱藏多個標籤功能逗號。例如：輸入entering this, that, something將隱藏每個跨度。

演示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" /> 

演示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(); 
      } 
     }) 
    }) 
})