Select a select by the input value

Question

Well, come on, I believe my doubt is simple but I can’t unravel.

<h2 style="color:#333333; font-family:verdana;font-size:100%;text-align:center">Código de Cliente:


<input type="text" id="codigocliente" /></h2>


<label for="lista">lista</label>
<select name="lista" id="lista" disabled="disabled">
  <option>Digite seu CPF</option>
  <option value="b3cdb2_353be7884bbf44488145b33338c03e52~mv2">12345678</option>
  <option value="b3cdb2_0bb5060e934b4896a8d78974355254d8~mv2">00000000</option>

</select>

</label>
<h3 style="text-align:center">    
<button type="button" class="button" onclick="window.open('https://static.wixstatic.com/media/' + document.getElementById('lista').value + '.jpg')" ><span>Acessar</span></button>
</h3>

I have this scrypt, I would like the select to automatically select the value by the value entered in the input. Type, if in the input the client enters the value 00000000, Selected automatically switches to this value, if it does not exist, display an alert saying that the value does not exist.

I left Selected disabled because I don’t want to display the list of values, I just want the client to type in the input and Selected to select the value if it exists or send a message saying that the value does not exist.

Once the value of Selected is selected, it has a button to which it redirects it to a specific image or file.

Answer 1

The solution is simple, insert the code below in your Javascript, but don’t forget to put the Jquery references in your code header.

$(function(){
    var existeCpf = false;

    $('#id_do_input').keyup(function(){
        verificaCpf($(this).val());
    });

    function verificaCpf(_valor){
        $('#lista').each(function(){
            if($(this).val() == _valor){
                $(this).val(_valor);
                existeCpf = true;
            }
        });
    }
});

Basically what I did was run your combobox and checked if there is any value equal to what was typed, if it has, it will select and change the variable existeCpf to true, this way you can give an alert to the user.

Remarks: Before pasting this code, change the values from your combobox to the actual values of the Cpfs.

Answer 2

Welcome ! we can do using js observe:

$('#input').keyup(function(){

  var input = document.getElementById("input").value; //pega o valor digitado.

  if (input == '000' || input == '111' || input == '222') { //verifica se é o valor de sua preferencia. se for seleciona.
    
     //seleciona o elemento de acordo com o text do select
    $("#lista option:contains('"+input+"')").attr('selected', 'selected');
  }
  //coloco o length para pegar uma quatidade minimade caracteres para não mandar o alert direto
  if(input.length == 3 && input != '000' && input != '111' && input != '222'){
    alert("valor não existente. tente novamente!");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="input"></input>

<select name="lista" id="lista" class="form-control">
<option value="" selected>Selecione</option>
    <option value="888888">000</option> 
    <option value="999999">111</option>
    <option value="777777">222</option>
  </select>