Как связать результаты, возвращаемые функцией Jquery Keyup, с выпадающим списком выбора?

Следующий элемент div представляет область на веб-странице, где пользователь вводит текст, который он ищет. В настоящее время возвращаемые результаты загружаются в элемент div. Я хотел бы изменить эту функциональность. Например, я хотел бы использовать, скажем, элемент ввода и предоставить пользователю возможность выбрать из списка использование клавиш со стрелками.

<div>
<label for="search-box">Name</label>
<input type="text" id="search-box"  />
<div id="suggesstion-box"></div>
</div>

Этот JS-скрипт принимает символы, введенные пользователем, и передает их в php-скрипт.

$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "includes/get_item_names_by_user_input.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#search-box").css("background","#FFF url(icons/LoaderIcon.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
});
});

function selectItem(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}

Это находится на странице get_item_names_by_user_input.php. На этой странице я принимаю ключевое слово им, которое было введено пользователем, и передаю его функции, которая возвращает объект JSON, соответствующий вводу, введенному пользователем.

<ul>
<?php
$result = get_item_by_user_input($_POST["keyword"]);
foreach($result as $item) {
?>
<li onClick="selectItem('<?php echo $item["term_name"]; ?>');"><?php echo $item["term_name"]; ?></li>
<?php } ?>
</ul>