Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Jak wyświetlić propozycje wyszukiwania - javascript, jquery, css, ajax, jsp

Jak wyświetlać sugestie dotyczące wyszukiwania - javascript, jquery, css, ajax, jsp

Próbuję dodać sugestie do mojego pola wyszukiwania. Gdy użytkownik wprowadzi coś, powinien wyświetlić sugestie, a jeśli najedziesz kursorem na dowolną sugestię, należy ją podświetlić, a po kliknięciu sugestii należy ją dodać do wyszukiwanych haseł wraz ze średnikiem, aby oddzielić wyszukiwane hasła.

Jestem w stanie pokazać sugestie, ale problem polega na wdrożeniu następujących

Oczekiwany wynik jest następujący

Search box >>> f
suggestions first
four
when first is clicked it will be highlighted then
Search box >>> first;

when t is clicked
Search box >>> first;t
suggestions two
three
click on three will cause to remove the t from search box and add the three
Search box >>> first;three

when tw is entered
Search box >>> first;three;tw
suggestions two
twelve
when two is selected
Search box (first;three;two

suggestion.jsp

<c:forEach items="${sug}" var="mysug">
<label id="suggestion" onclick="selectSug(<c:out value="${mysug}"/>)"><c:out
value="${mysug}"/></label>
<br/>
</c:forEach>

search.jsp

 <script type="text/javascript">
function selectSug(value){
alert("vlue"+value);
var temp = document.getElementById("mysearch").textContent ;
document.getElementById("mysearch").textContent = temp + value + " ; ";
}

function findsug(value){
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("sugs").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("get","search?input="+value,false);
xmlhttp.send();
}
...
<s:textfield id="mysearch" name="mysearch" label="Search"
onkeyup="findsug(this.value)"/>

<div id="sugs">
</div>

mystyle.css