Current Search Notifier

by thillin

HTML

<input class="keyword" placeholder="Keyword"></input>
<input class="location"  placeholder="Location"></input>
<input class="bounty"  placeholder="Bounty"></input>
<div class="informer">
    <ul>
        <li>Current Search Criteria:</li>
        <li class="keyword">Keyword: <span></span></li>
        <li class="location">Location: <span></span></li>
        <li class="bounty">Bounty: <span></span></li>
    </ul>
    
    
</div>

CSS

li.bounty, li.location, li.keyword {
    display: none;
}

JavaScript

function clearVal(ident) {
    $(ident)
               .not(':button, :submit, :reset, :hidden')
               .val('')
               .removeAttr('checked')
               .removeAttr('selected');
}

$('input').change(function() {
    var keyword = $('.keyword').val();
    var location = $('.location').val();
    var bounty = $('.bounty').val();
    $('.keyword span').remove();
    $('.keyword').append('<span>' + keyword + '</span>');
    $('.location span').remove();
    $('.location').append('<span>' + location + '</span>');
    $('.bounty span').remove();
    $('.bounty').append('<span>' + bounty + '</span>');
    if (keyword !== '') {
        $('li.keyword').show();
    } else {
        $('li.keyword').hide();        
    }
    if (location !== '') {
        $('li.location').show();
    } else {
        $('li.location').hide();        
    }
    if (bounty !== '') {
        $('li.bounty').show();
    } else {
        $('li.bounty').hide();        
    }
});
$('li').click(function() {
    var className = $(this).attr('class');
    $('li.' + className).hide();
    className = 'input.' + className;
    clearVal(className);
});