tag cloud filter help please

Question

Thanks all for the help, rod.

Hi All,

I have a div that contains many spans and each of those spans contains a single href.

Basically it's a tag cloud. What I'd like to do is have a textbox that filters the tag cloud on KeyUp event.

Any ideas or is this possible?

Updated question: What would be the best way to reset the list to start the search over again?

Thanks, rodchar

Answer 1

Basically, what you want to do is something like this

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

Answer 2

This can probably be improved upon and made lighter but this at least gives the functionality of being able to hide multiple tags by seperating your input by commas. For example: entering this, that, something into the input will hide each of those spans.

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