JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>
  öncelikle inputun içine tıklayın ve klavyenideki ok tuşlarıyla yukarı aşağı yapın.
  <br/> göreceğiniz üzere aşağı giderken cursor kelimenin sonuna geldiği halde yukarı giderken neden kelimenin başına gelmektedir? bunu çözemiyorum.
</h4>

<input type="text" name="q" id="q" />
<h3>
  seçilenler
</h3>
<ul id="list">
  <li class="aramasonucu"><a href="#" tabindex="1">serkan</a></li>
  <li class="aramasonucu"><a href="#" tabindex="1">osman</a></li>
  <li class="aramasonucu"><a href="#" tabindex="1">ahmet</a></li>
</ul>

CSS

li.secilen {
  background: yellow
}

JavaScript

var li = $('li.aramasonucu');
var lisecilen;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (lisecilen) {
      lisecilen.removeClass('secilen');
      next = lisecilen.next();
      if (next.length > 0) {
        lisecilen = next.addClass('secilen');
        var content = $(lisecilen).text();
        $('#q').val(content);
      } else {
        lisecilen = li.eq(0).addClass('secilen');
        var content = li.eq(0).text();
        $('#q').val(content);
      }
    } else {
      lisecilen = li.eq(0).addClass('secilen');
      var content = li.eq(0).text();
      $('#q').val(content);
    }
  } else if (e.which === 38) {
    if (lisecilen) {
      lisecilen.removeClass('secilen');
      next = lisecilen.prev();
      if (next.length > 0) {
        lisecilen = next.addClass('secilen');
        var content = $(lisecilen).text();
        $('#q').val(content);
      } else {
        lisecilen = li.last().addClass('secilen');
        var content = li.last().text();
        $('#q').val(content);
      }
    } else {
      lisecilen = li.last().addClass('secilen');
    }
  }
       $('#q').focus();
     return false;
});