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

标签云过滤器

2 个答案: