Прошу помочь починить скрипт cелект с вводом и выводом описания

с горем пополам сделал селект с возможностью ввода и выводом описания блока, но если выбирать пункт через ввод, а не просто кликом, то работает криво, выводит неправильное (предыдущее описание.

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
</head>

<body>
  <div style="width:520px;margin:0px auto;margin-top:30px;">
    <select class="livesearch" style="width:400px;">
      <option value="0">Пункт 0</option>
      <option value="1">Пункт 1</option>
      <option value="2">Пункт 2</option>
      <option value="3">Пункт 3</option>
      <option value="4">Пункт 4</option>
      <option value="5">Пункт 5</option>
      <option value="6">Пункт 6</option>
      <option value="7">Пункт 7</option>
      <option value="8">Пункт 8</option>


    </select>
  </div>

  <p id='mytext'></p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
  <script type="text/javascript">
    $(".livesearch").chosen();

    var descr = [
      'Описание 0',
      'Описание 1',
      'Описание 2',
      'Описание 3',
      'Описание 4',
      'Описание 5',
      'Описание 6',
      'Описание 7',
      'Описание 8',


    ]

    document.querySelector('body').addEventListener('keyup', e => {
      if (e.key != 'Enter') return
      const ou = e.target.closest('.chosen-container')
      if (!ou) return
      setTimeout(_ => {
        const o = ou.querySelector('.result-selected')
        const i = o.dataset.optionArrayIndex
        if (i) catalog_rebuild(+i)
      }, 0)
    })

    document.querySelector('body').addEventListener('click', e => {
      const ou = e.target.closest('.chosen-results')
      if (!ou) return
      const o = e.target.closest('li')
      if (!o) return
      const i = $(ou).find('li').index(o)
      if (i > -1) catalog_rebuild(i)
    })

    function catalog_rebuild(x) {
      document.getElementById("mytext").innerHTML = descr[x];
    }
  </script>
</body>

</html>


Ответы (0 шт):