Dynamic search for selection

Question

I need to in a text field by clicking the F2 key to open a query window and selecting the employee to take code from it to the text field.

Would you have some library in jquery or other solution?

Answer 1

Function keys (F1, F2, F3, F4...) are usually already used for certain functions of the browser, so it is not possible to monitor them. If you want to capture any other key you can simply use the code below:

  function teclaPressionada(){
     alert("tecla" + event.keyCode);
  }
document.onkeypress = tecla;

So you will discover the key code when pressing any key with the page html opened. After that just mount the call to the function you want

Answer 2

Consider a input:

<form>
  <label>
    Qual é o seu número da sorte?
    <input name="number" type="text" />
    <sub>Pressione <kbd>F2</kbd> para exibir a lista.</sub>
  </label>
</form>

To check the key pressed, use the function keypress jQuery:

$("input[name=number]").keypress(event => {
    event.preventDefault();
    if (event.key == "F2")
    {
        // A tecla F2 foi presisonada.
    }
});

To open a new window, it will depend a lot on the logic of your application. As you were not very clear about the problem, I used a simple modal window of Bootstrap CSS:

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Número da Sorte</h4>
      </div>
      <div class="modal-body">
        <fieldset>
          <input type="radio" name="my_number" value="1" /> 1
          <input type="radio" name="my_number" value="2" /> 2
          <input type="radio" name="my_number" value="3" /> 3
          <input type="radio" name="my_number" value="4" /> 4
          <input type="radio" name="my_number" value="5" /> 5
        </fieldset>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary" id="modal-save">Salvar</button>
      </div>
    </div>
  </div>
</div>

To display it, it’s enough:

$('#modal').modal('show');

Staying, then:

$("input[name=number]").keypress(event => {
    event.preventDefault();
    if (event.key == "F2")
    {
        // A tecla F2 foi presisonada.
        $('#modal').modal('show');
    }
});

In the modal window, the user selects the desired value and clicks the "Save" button. When this is clicked, we update the value of the input:

$("#modal-save").on("click", (event) => {
  event.preventDefault();
  const value = $("input[name=my_number]:checked").val();
  $('#modal').modal('hide');
  $("input[name=number]").val(value);
});

The complete code, with a functional example, can be seen below:

$(() => {
  $("input[name=number]").keypress(event => {
    if (event.key == "F2")
    {
      $('#modal').modal('show');
    }
  });
  
  $("#modal-save").on("click", (event) => {
    event.preventDefault();
    const value = $("input[name=my_number]:checked").val();
    $('#modal').modal('hide');
    $("input[name=number]").val(value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form>
  <label>
    Qual é o seu número da sorte?
    <input name="number" type="text" />
    <sub>Pressione <kbd>F2</kbd> para exibir a lista.</sub>
  </label>
</form>

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Número da Sorte</h4>
      </div>
      <div class="modal-body">
        <fieldset>
          <input type="radio" name="my_number" value="1" /> 1
          <input type="radio" name="my_number" value="2" /> 2
          <input type="radio" name="my_number" value="3" /> 3
          <input type="radio" name="my_number" value="4" /> 4
          <input type="radio" name="my_number" value="5" /> 5
        </fieldset>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary" id="modal-save">Salvar</button>
      </div>
    </div>
  </div>
</div>