'How to change color of a select on keypress

I am trying to create a form. I am using a <datalist> tag as well as an <input> tag, so that a user can also type an option or just select an option by clicking on these. I would like to make a user to make use of the input in order to search for an option. I would like for this option to continually change color on keypress.

Example:

When an option is available stating "Hello" and the user starts typing the first couple characters (e.g. "He"), the typed in part should become bold and the "Hello" option related to it should be detected.

Is it possible to achieve this using jQuery and if so, how could I do this?

<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>
javascriptjqueryhtmlcssforms


Solution 1:[1]

This code should work but remember you are using a datalist element and it cannot be styled via css neither forced by js. If you want to style some parts of an option element, use a select element instead of datalist.

$(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>

Solution 2:[2]


//short but fast use objet
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>

<body>
    <h1>text</h1>
</body>
<script>
    let text = document.getElementsByTagName("h1")[0]
    let change = {
        r: "red",
        b: "blue",
        y: "yellow",
        g: "green",
        o: "orange"
    }
    document.addEventListener("keypress", (e) => {
        let color = e.key
        text.style.color = change[color]


    })
</script>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Naui Monclús
Solution 2

Related Questions