Estoy tratando de crear un formulario. Estoy usando una <datalist>etiqueta además de una <input>etiqueta, para que un usuario también pueda escribir una opción o simplemente seleccionar una opción haciendo clic en ellas. Me gustaría hacer que un usuario haga uso de la entrada para buscar una opción. Me gustaría que esta opción cambiara continuamente de color al presionar una tecla.
Ejemplo:
Cuando hay una opción disponible que dice "Hola" y el usuario comienza a escribir los primeros dos caracteres (por ejemplo, "Él"), la parte escrita debe ponerse en negrita y debe detectarse la opción "Hola" relacionada.
¿Es posible lograr esto usando jQuery y, de ser así, cómo podría hacerlo?
<div class="cargo blocos">
<label class="titulos">Cargo</label>
<input class="custom-select" type="text" list="cargos" placeholder="Ex: Analista de Banco de Dados" required />
<span class="invalid-feedback">Cargo é obrigatório</span>
<datalist id="cargos">
<option>Analista de RH</option>
<option>Analista de Marketing</option>
</datalist>
</div>Solución del problema
Este código debería funcionar, pero recuerde que está utilizando un elemento de lista de datos y no se puede diseñar a través de css ni forzado por js. Si desea diseñar algunas partes de un elemento de opción, use un elemento de selección en lugar de una lista de datos.
$(document).ready( function() {
$('.custom-select').on('keyup', function() {
checkValues($(this).val());
});
});
function checkValues(val) {
var options = $('#cargos option');
var valLength = val.length;
$('#cargos option').each( function() {
var begins = $(this).text().indexOf(val);
$(this).html(begins === 0? '<strong>' + $(this).text() + '</strong>': $(this).text());
})
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="cargo blocos">
<label class="titulos">Cargo</label>
<input class="custom-select" type="text" list="cargos" placeholder="Ex: Analista de Banco de Dados" required />
<span class="invalid-feedback">Cargo é obrigatório</span>
<datalist id="cargos">
<option>Analista de RH</option>
<option>Analista de Marketing</option>
<option>Retrasado de Marketing</option>
</datalist>
</div>
</body>
No hay comentarios.:
Publicar un comentario