<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br> <div class="row"> <div class="dual-list list-left col-xs-12"> <div class="well text-right"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <input type="text" name="SearchDualList" class="form-control text-center" placeholder="buscar" /> </div> </div> <div class="panel-body"> <ul class="list-group list-group-header"> <li class="list-group-item list-group-body list_border_header"> <div class="row"> <div class="datos_list col-xs-4 text-left">Nombre</div> <div class="datos_list tabla_borde_left col-xs-4 text-left">Codigo</div> <div class="datos_list tabla_borde_left col-xs-1 text-left text-center">Ver</div> <div class="datos_list tabla_borde_left col-xs-2 text-left text-center">Modificar</div> <div class="datos_list tabla_borde_left col-xs-1 text-left text-center">Borrar</div> </div> </li> </ul> <ul class="list-group list-group-bod"> <li class="list-group-item list_border_datos"> <div class="row" style=""> <div class="datos_list col-xs-4 text-left"> ncosa </div> <div class="datos_list tabla_borde_left col-xs-4 text-left" >...</div> <div class="datos_list tabla_borde_left col-xs-1 text-left text-center"> <span class="glyphicon glyphicon-eye-open"></span> </div> <div class="datos_list tabla_borde_left col-xs-2 text-left text-center"> <span class="glyphicon glyphicon-pencil"></span> </div> <div class="datos_list tabla_borde_left col-xs-1 text-left text-center"> <span class="glyphicon glyphicon-trash"></span> </div> </div> </li> </ul> <ul class="list-group list-group-bod"> <li class="list-group-item list_border_datos"> <div class="row" style=""> <div class="datos_list col-xs-4 text-left"> cosa </div> <div class="datos_list tabla_borde_left col-xs-4 text-left" >...</div> <div class="datos_list tabla_borde_left col-xs-1 text-left text-center"> <span class="glyphicon glyphicon-eye-open"></span> </div> <div class="datos_list tabla_borde_left col-xs-2 text-left text-center"> <span class="glyphicon glyphicon-pencil"></span> </div> <div class="datos_list tabla_borde_left col-xs-1 text-left text-center"> <span class="glyphicon glyphicon-trash"></span> </div> </div> </li> </ul> </div> <button type="button" class="btn btn-primary btn-block"><strong>Refrescar</strong></button> </div> </div> </div>

.dual-list .list-group { margin-top: 8px; } /*.list-left li, .list-right li { cursor: pointer; }*/ .list-arrows { padding-top: 100px; } .list-arrows button { margin-bottom: 20px; } .form-control{ margin-bottom: -1px !important; margin-top: 1px !important; } ul{ margin:0px !important; } .centro_tabla{ border-left:1px; } li{ font-size:16px; } .list-group-item{ padding: 0px 0px; } .datos_list{ padding: 10px 15px; } .row{ padding: 0px 10px; } .list_border_header{ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; } .list_border_datos{ border-radius:0 !important; } #preview-container { width: 100%; height: 100%; border-top: 2px solid rgb(204, 204, 204); border-bottom: 2px solid rgb(204, 204, 204); } .tabla_borde_left{ border-left: 2px solid; border-color: #e4e4e4; } body { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+"); } .btn-block{ font-size: 18px !important; } .glyphicon{ font-size:20px; } .glyphicon-eye-open{ color:#00c700; } .glyphicon-pencil{ color:#2197ff; } .glyphicon-trash{ color:red; } .list-group-header{ font-weight: bold; }

$(function () { $('[name="SearchDualList"]').keyup(function (e) { var code = e.keyCode || e.which; if (code == '9') return; if (code == '27') $(this).val(null); var $rows = $(this).closest('.dual-list').find('.list_border_datos'); var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function () { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); });