Dynamic Search for Selection

Function keys (F1, F2, F3, F4 ...) are often already used for certain browser functions, so you can not monitor them. If you want to capture another key you can simply use the code below:

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

So you will find the key code when you press any key with the page html open. After that, just mount the call to the function you want

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 jQuery keypress function:

$("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. Since you were not very clear about the problem, I used a simple Bootstrap CSS modal window:

<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, simply:

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

Getting, 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 it is clicked, we update the value of 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 working 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><scriptsrc="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>