<style type="text/css">
    #list-listOperacionesPredefinidas-{{ hash_listado }} {
        cursor: move;
    }
    
    .operacion-TAREA {
        color: #3c763d;
        background-color: #dff0d8;
    }
    .operacion-ADQUISICION {
        color: #8a6d3b;
        background-color: #fcf8e3;
    }
</style>

<div>
    <input type="text" class="form-control uppercase" id="input-search-listOperacionesPredefinidas-{{ hash_vista }}" onkeyup="busquedaLista()" placeholder="BUSCAR RECURSO">
    <hr>
    <ul class="list-group" style="height: 400px;overflow-y: scroll;border: thin solid #EEE;border-radius: 5px;" 
        id="list-listOperacionesPredefinidas-{{ hash_listado }}" >
      {% if operaciones %}
        {% for operacion in operaciones  %}
        <li data-operacion="{{operacion.operacionID}}"  class="list-group-item  css-operacion-{{hash_vista}} operacion-{{operacionP.tipoOperacionCODIGO}} ">
            {{ operacion.operacionTITULO }}
        </li>
        {% endfor %}
      {% endif %}
    </ul>
    <div align="center">
      {{ boton('Nuevo',"mostrarFormularioNuevoControlOperacionesAdministracion", null , 'AGREGAR NUEVO RECURSO' ) }}
    </div>
</div>

<script type="text/javascript" >
    
    function busquedaLista() {
          var filter, operacion, a, i;
          filter =  $("#input-search-listOperacionesPredefinidas-{{ hash_vista }}").val().toUpperCase();
          operacion =$("#list-listOperacionesPredefinidas-{{ hash_listado }} li");
          for (i = 0; i < operacion.length; i++) {
              if ( operacion[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                  operacion[i].style.display = "";
              } else {
                  operacion[i].style.display = "none";
              }
          }
      }
</script>