[SOLUCIONADO] Posicionarse en un select

[mblascog]

Buenas,
Dispongo de un select con muchas ítems, y quiero posicionarme según el contenido de un textbox, es decir, cuando escribo b, que se posicione al primer elemento que empieze por b, si luego escribo u, que será bu, se posicione al primer elemento que empieze por bu, o al próximo.

Código Javascript:

$('#select').find('option[text="B"]').val()
 

Pero esto me obliga a introducir el texto completo, y yo quiero que empieze por el texto introducido

Gracias

[ArturoGallegos]

estas abierto a usar un framework como complemento o en lugar de jquery?

puedes hacer esto con Vue y no requiere grandes conocimientos


También se puede llevar eso mismo a jquery pero habrá que ver como tienes tu código para saber que tantos cambios requieres hacer, pero seguramente viendo este código puedes sacar ideas y llevarlo tu mismo a jquery

[mblascog]

Muchas gracias, tomo nota.

[Alexis88]

Con jQuery, con otra librería/framework y hasta con JavaScript puro y duro en un entorno en el que aún no se brinde soporte a los métodos implementados por ECMAScript 6, solo necesitarías recorrer el conjunto de opciones del <select> y hacer la comparación con el valor escrito, pudiéndote apoyar con métodos de búsqueda en cadenas como .search() (si deseas buscar usando una expresión regular) o .indexOf(). En el caso de que coincidan los valores comparados, tan solo tendrías que asignar el valor booleano true a la propiedad selected de la opción en cuestión y cortar la secuencia del bucle. Para evitar problemas con la diferencia entre mayúsculas y minúsculas, opto por dejar en minúsculas a los valores comparados usando el método .toLowerCase().

Código Javascript:

var seleccion = function(input, select){
    $(input).on("input", function(){
        var palabra = $(this).val().toLowerCase();
        
        $(select).children().each(function(){   
            var opcion = $(this).val().toLowerCase();           
            
            if (opcion.indexOf(palabra) === 0){
                $(this).prop("selected", true);
                return false;
            }
        });
    });
};
 
seleccion("#id_del_input", "#id_del_select");
 

DEMO

[mblascog]

Gracias Alexis, lo había conseguida de otra manera, pero esta me parece mejor.