Я намагаюся додати пропозиції до вікна пошуку. Після того, як користувач вводить щось, він повинен показувати пропозиції, а якщо користувач наводить курсор на будь-яку з пропозицій, його слід виділити, а при натисканні на пропозицію його слід додати до пошукових термінів разом з крапкою з комою для розділення пошукових термінів.
Я в змозі показати пропозиції, але проблема полягає в наступному
Очікуваний результат такий
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
#suggestion:hover{
background:red;
}
Повідомте мене, чи повинен я включати будь-яку іншу частину коду. Мені також цікаво, чи можу це зробити простішим способом, використовуючи jQuery
Відповіді:
0 для відповіді № 1Спробуйте заданий віджет jquery-ui