JQuery querySelectorAll не работает?

Я пытаюсь создать простой фильтровать по мере ввода для моей панели навигации, у меня есть следующее, но, похоже, работает неправильно:

$("input[id='gameSearch']").on('keydown', function(e) {
          var input, filter, ul, li, a, i;
          input = $(this);
          filter = input.val().toUpperCase();
          div = $('#gamesDropdown');
          a = div.querySelectorAll("li a");
          for (i = 0; i < a.length; i++) {
              if (a[i].html().toUpperCase().indexOf(filter) > -1) {
                  a[i].style.display = "";
              } else {
                  a[i].style.display = "none";
              }
          }
      });

У меня есть макет HTML как таковой:

<ul id = "gamesDropdown">
    <li>
        <input type = "text" id = "gameSearch" placeholder = "Search...">
    <li>
    <li>
        <a href = "#blah">Blah blah</a>
    <li>
    <li>
        <a href = "#blah">Blah blah</a>
    <li>
    <li>
        <a href = "#blah">Blah blah</a>
    <li>
</ul>

Ошибка:

Uncaught TypeError: div.querySelectorAll is not a function

Это устарело или я просто использую неправильно?