CODEWITHSUNDEEP
javascriptjquery
Rod
Rod

Reputation: 15475

tag cloud filter

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?

Upvotes: 1

Views: 664

Answers (2)

Sam
Sam

Reputation: 4487

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

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129812

Basically, what you want to do is something like this

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

Upvotes: 3

Related Questions