Search data in the drop-down list from a text field

function crit_busqueda() 
{
  var input=document.login.texto_busqueda.value.toLowerCase();
  //var output=document.getElementById('pro_id').options;
  var output=document.login.pro_id.options;
  for(var i=0;i<output.length;i++) 
  {
     if(output[i].value.indexOf(input)==0)
     {
         output[i].selected=true;
         console.log(output[i]);
     }                                      
     if(document.forms[0].texto_busqueda.value=='')
     {
         output[0].selected=true;
     }
   
  }
}

<form method="POST" id="login" name="login">
     <input type="text" name="texto_busqueda" id="texto_busqueda"class="form-control" onkeyup="crit_busqueda();"/>
     <select name="pro_id" class="selectpicker form-control" id="pro_id">
         @foreach($productos as $producto)
                 <option value="{{$producto->id}}">{{$producto->nombre_cargo}}</option>
         @endforeach
      </select>
</form>

function agregarProducto() 
        {
            var sel = $('#pro_id').find(':selected').val(); //Capturo el Value del Producto
            var text = $('#pro_id').find(':selected').text(); //Capturo el Nombre del Producto- Texto dentro del Select

            @foreach($productos as $producto) 
                var id = <?php echo json_encode($producto->id); ?>;
                if (sel == id) 
                {
                    var sptext = text.split();
                    var newtr = '<tr class="item"  data-id="' + sel + '">';
                    newtr = newtr + '<td class="iProduct" >' + sel + '</td>';
                    newtr = newtr + '<td> <input  class="form-control" id="1" name="ListaPro" value="{{ $producto->nombre_cargo }}" /></td>';
                    newtr = newtr + '<td> <input  class="form-control" id="1" name="ListaPro" value="{{ $producto->descripcion_cargo }}" /></td>';
                    newtr = newtr + '<td> <input  class="form-control" id="2" name="ListaPro" value="0" required /></td>';
                }
            @endforeach


            $('#ProSelected').append(newtr); //Agrego el Producto al tbody de la Tabla con el id=ProSelected
            RefrescaProducto(); //Refresco Productos
            $('.remove-item').off().click(function(e) {
                $(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
                if ($('#ProSelected tr.item').length == 0)
                    $('#ProSelected .no-item').slideDown(300);
                RefrescaProducto();
            });
            $('.iProduct').off().change(function(e) {
                RefrescaProducto();
            });
        }