Прошу помочь починить скрипт 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>