我创建了一个ajax代码来从数据库中获取数据，数据以列表的形式显示在html页面中。 当我点击列表项时，数据进入inputtext框。 但我希望当按下Enter键时，可以通过键盘向上和向下按钮广告浏览列表，该选项进入文本框。 怎么做？？
这是我的index.jsp文件
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%
String s=request.getParameter("val");
s=s.trim();
if(s!=null) //user has already enetered some data
{
String str[]=s.split(" ");
String act_data=str[str.length-1]; //last word that the user has entered
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/word_prediction","root","root");
PreparedStatement ps=con.prepareStatement("select * from predict where phrase like '" +act_data +"%'");
ResultSet rs=ps.executeQuery();
ArrayList<String> store_phrase_dyn=new ArrayList<String>();
ArrayList<String> store_count_dyn=new ArrayList<String>();
while(rs.next())
{
store_phrase_dyn.add(rs.getString(1));
store_count_dyn.add(rs.getInt(2)+"");
}
String store_phrase[]=new String[store_phrase_dyn.size()];
String store_count[]=new String[store_count_dyn.size()];
store_phrase_dyn.toArray(store_phrase);
store_count_dyn.toArray(store_count);
String temp_count;
String temp_phrase;
for(int j=0;j< store_count.length-1;j++)
{
for(int k=0;k< store_count.length -1-j;k++)
{
if(Integer.parseInt(store_count[k]) < Integer.parseInt(store_count[k+1]))
{
temp_phrase = store_phrase[k];
store_phrase[k] = store_phrase[k+1];
store_phrase[k+1] = temp_phrase;
temp_count = store_count[k];
store_count[k] = store_count[k+1];
store_count[k+1] = temp_count;
}
}
}
int i=0;
while(i<5)
{out.print(store_phrase[i]+",");
i++;
}
con.close();
}
catch(Exception e)
{
e.printStackTrace();
}
}
else
{
if(s==null || s.trim().equals("")){
out.print("Please enter some letter");
}else{
//int id=Integer.parseInt(s);
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/word_prediction","root","root");
PreparedStatement ps=con.prepareStatement("select * from predict where phrase like '"+ s +"%'");
//ps.setInt(1,id);
ResultSet rs=ps.executeQuery();
ArrayList<String> store_phrase_dyn=new ArrayList<String>();
ArrayList<String> store_count_dyn=new ArrayList<String>();
while(rs.next())
{
store_phrase_dyn.add(rs.getString(1));
store_count_dyn.add(rs.getInt(2)+"");
}
String store_phrase[]=new String[store_phrase_dyn.size()];
String store_count[]=new String[store_count_dyn.size()];
store_phrase_dyn.toArray(store_phrase);
store_count_dyn.toArray(store_count);
String temp_count;
String temp_phrase;
for(int j=0;j< store_count.length-1;j++)
{
for(int k=0;k< store_count.length -1-j;k++)
{
if(Integer.parseInt(store_count[k]) < Integer.parseInt(store_count[k+1]))
{
temp_phrase = store_phrase[k];
store_phrase[k] = store_phrase[k+1];
store_phrase[k+1] = temp_phrase;
temp_count = store_count[k];
store_count[k] = store_count[k+1];
store_count[k+1] = temp_count;
}
}
}
int i=0;
while(i<5)
{out.print(store_phrase[i]+",");
i++;
}
con.close();
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
%>
这是我的table1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/masterpagetheme.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.3.min.js" >
$("#xcepsun").keydown(function(e)
{
alert("keydown event");
if(e.keyCode == 38) //up
{
console.log("hi");
$(".move:focus").closest('li').prev().find('a.move').focus();
}
if(e.keyCode == 40)//down
{
$(".move:focus").closest('li').next().find('a.move').focus();
}
});
$('.move').click(function()
{
this.focus();
});
$(function()
{
$('#0').focus();
});
</script>
<style>
#footer
{
position:absolute;
bottom:0;
width:100%;
height:20px; /* Height of the footer */
background:#0B67CD;
font-size: 0.8em;
color:white;
}
.services
{
display:none;
}
.services li
{
width:150 px;
}
.services li.selected
{
background-color: grey;
}
</style>
<style>
.items{
list-style: none;
}
.items>a{
color:black;
text-decoration: none;
}
</style>
<script>
function update(valued)
{
console.log("reaching");
console.log(valued);
var pre_data=document.getElementById('t1').value;
var arr=pre_data.split(" ");
pre_data="";
for(i=0;i<arr.length-1;i++)
{
pre_data=pre_data+" "+arr[i];
}
valued=pre_data+" "+valued;
document.getElementById('t1').value=valued;
}
</script>
<script>
var request;
function sendInfo()
{
var v=document.vinform.t1.value;
var url="index.jsp?val="+v;
if(window.XMLHttpRequest)
{
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request=new ActiveXpObject("Microsoft.XMLHTTP");
}
try
{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
}
catch(e)
{
alert("Unable to connect to server");
}
}
function getInfo(){
if(request.readyState==4)
{
var val=request.responseText.trim();
var values=val.split(",");
var ulist= document.getElementById("xcepsun");
//var ulist= document.xcepsun.value;
var items="";
for(var i=0;i<values.length-1;i++)
{
items+="<li class='items'><a id=i class='move' href='#' onclick='update(\""+values[i].trim()+"\")'>"+values[i].trim()+"</a></li>";
}
console.log(items);
ulist.innerHTML=items;
console.log(values);
//document.getElementById('amit').innerHTML=val;
}
}
</script>
</head>
<body>
<div class="navTop">
<img border="0" width="100%" height="100%" alt="header" src="css\images\header1.jpg">
</div>
<div class="container">
<div id="parent">
<table width="100%">
<tr>
<td>
<table width="100%" align="center" style="border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #CCC;">
<tr>
<td style="padding-left: 1%;background-color: #0B67CD;">
<div id="div1" style="color:white;width:100%;height:52px;line-height:1em; font-size: 14;">
<br/>
<input type="hidden" name="source" value="in"/>
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td align="left" style='background-color: rgb(220, 235, 249);'>
<div style="width:100%">
<div style="background-color:#77AEEB;height:35px;width:100%;">
<div id=newexp align="center" style="height:38px;width:100%;color:gray">
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="InboxContainer" style='width:100%;height:100%;margin-top:-25px;'>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<marquee><h1>word prediction tool</h1></marquee>
<form name="vinform">
<input type="text" style="width: 300px;" name="t1" id="t1" onkeyup="sendInfo()" >
</form>
<ul id='xcepsun'>
</ul>
<div id="footer" align="center">Copyright © 2014-2015 AAI Group C-DAC Pune, All Rights Reserved</div>
<!-- BSA AdPacks code
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
-->
</body>
</html>
答案 0 :(得分：0)
您需要抓住keypress事件而不是keydown。 keypress同时是keyup和keydown，它可以帮助您抓住导航向上和向下键的按键。
答案 1 :(得分：0)
您需要进行一些自定义，但请从fiddle查看此答案。单击列表的第一项，然后使用向上和向下箭头键进行导航。
var li = $('li');
var liSelected;
$(window).keydown(function(e){
if(e.which === 40){
if(liSelected){
liSelected.removeClass('selected');
next = liSelected.next();
if(next.length > 0){
liSelected = next.addClass('selected');
}else{
liSelected = li.eq(0).addClass('selected');
}
}else{
liSelected = li.eq(0).addClass('selected');
}
}else if(e.which === 38){
if(liSelected){
liSelected.removeClass('selected');
next = liSelected.prev();
if(next.length > 0){
liSelected = next.addClass('selected');
}else{
liSelected = li.last().addClass('selected');
}
}else{
liSelected = li.last().addClass('selected');
}
}else if(e.which === 13){
$("#inputFld").val($("li.selected").text());
}
});
<input type="text" id="inputFld">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
li.selected {background:yellow}