Pesquisa dinâmica

by edgardleal

HTML

<input type="text" id="edit" /><br>
<div id="bolsao"></div>
<div id="lojas"></div>

CSS

#lojas{
  width : 15%;
}

#lojas, #bolsao{
    border : solid 2px;
    float : left;
    height : 500px;
}

#bolsao{
    width : 80%;
}

JavaScript

function change(){
    var self = $(this);
    self.hide('slide',100, function(){
       self.remove();
        self.appendTo($('#bolsao'));
        self.button().fadeIn();
    });
}
function getButtonLoja(value){
    for(var i = ("" + value).length ; i < 3; i++)
        value = '0' + value;
    return $("<div>" + value + "</div>")
    .css('margin', '5px')
    .button().click(change);
}

$("input[type=text]").change(function(){
    $('#lojas > div').hide();
    $('#lojas > div:contains(' + this.value + ')')
    .show();
});

for(var i = 0; i < 50; i++)
    $("#lojas").append(getButtonLoja(i));