JSFiddle - React, Tailwind, and code Playground
HTML
<div id="targetDiv">
<input id="StartStation" autocomplete="off" class="valid" type="text">
<input id="SelectedStationStart" name="SelectedStationStart" type="hidden">
<ul id="targetUI">
<li id="359" onclick="javascript:setAutoComplete(359, 'Achim','StartStation','SelectedStationStart')">Achim</li>
<li id="419" class=".selected" onclick="javascript:setAutoComplete(419, 'Achmer','StartStation','SelectedStationStart')">Achmer</li>
<li id="1541" onclick="javascript:setAutoComplete(1541, 'Achmer (Bus)','StartStation','SelectedStationStart')">Achmer (Bus)</li>
<li id="135" onclick="javascript:setAutoComplete(135, 'Bad Sachsa','StartStation','SelectedStationStart')">Bad Sachsa</li>
<li id="283" onclick="javascript:setAutoComplete(283, 'Büsenbachtal','StartStation','SelectedStationStart')">Büsenbachtal</li>
<li id="630" onclick="javascript:setAutoComplete(630, 'Flachsberg (Linie 641), Schwanewede','StartStation','SelectedStationStart')">Flachsberg (Linie 641), Schwanewede</li>
<li id="528" onclick="javascript:setAutoComplete(528, 'Gertenbach','StartStation','SelectedStationStart')">Gertenbach</li>
<li id="1121" onclick="javascript:setAutoComplete(1121, 'Golmbach','StartStation','SelectedStationStart')">Golmbach</li>
<li id="973" onclick="javascript:setAutoComplete(973, 'Hachmühlen','StartStation','SelectedStationStart')">Hachmühlen</li>
<li id="635" onclick="javascript:setAutoComplete(635, 'Meyenburg Wachendorf, Schwanewede','StartStation','SelectedStationStart')">Meyenburg Wachendorf, Schwanewede</li>
</ul>
</div>
CSS
#targetUI li {
display: block;
padding: 5px;
background-color:#afefef;
border: 1px solid #eeeeee;
margin: 0px 0px;
text-align:center;
}
#targetUI li.selected{
background-color: #bbbbbb;
color: #000000;
}
#targetUI li::selection {
background-color: #00ff90;
color: #000000;
}
#targetUI li:hover {
background-color: #bbbbbb;
color: #000000;
}
#targetUI{
width:15em;
background-color:#bbbbbb;
}
#targetUI ul{
position:relative;
right:1em;
bottom:1em;
background-color:#F0F4D6;
border:1px solid #000000;
padding: 0px;
list-style: none;
}
JavaScript
var stationAction = "/AboTicketSystem/SelectStation";
$(function () {
$("#StartStation").on("keyup", function (e) {
//get value from input textbox
//scroll through list with keydown
if (e.keyCode == 40 || e.keyCode==38) { // down, up
var selected = $(".selected");
$("#targetUI li").removeClass("selected");
// if there is no element before the selected one, we select the last one
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
} else { // otherwise we just select the next one
selected.prev().addClass("selected");
}
}
else if(e.keyCode==13)
{
//set item to textbox
var selected = $(".selected");
selected.trigger("click");
}
else
{
var query = $(this).val();
//fetch values for searchterm
getItems(query, 'StartStation', 'SelectedStationStart', stationAction);
}
});
//call for Autocomplete Search
function getItems(query, parent, idField, computedurl) {
//handle search from inputfield
var postData = {
searchvalue: query
};
addAntiForgeryToken(postData);
request = $.ajax({
cache: false,
type: 'POST',
url: computedurl,
data: postData,
dataType:...