用键盘上下导航
navigate up and down with keyboard
我创建了一个ajax代码从数据库中获取数据,数据以列表的形式显示在html页面中。当我单击列表项时,数据将进入输入文本框。但是我想通过键盘上下按钮浏览列表,当我按下回车键时,该选项会进入文本框。怎么做?
这是我的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>
您需要捕获keypress
事件而不是keydown
。keypress
是同时的keyup
和keydown
,这将帮助你抓住按下导航的上下键。
您需要进行一些自定义,但请从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}
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- JavaScript上下滚动不可预测
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 如何使导航栏随着滚动上下滚动
- 引导:下拉子元素,而不在导航栏上下拉父元素
- 使用上下箭头来导航Extjs树
- 上下滚动页面JavaScript导航
- 覆盖DHTMLX树形结构中的OOTB上下导航功能
- 用键盘上下导航
- 如何使用两个按钮上下导航
- Javascript用于菜单输入键和上下键导航
- 通过上下箭头键导航到特定的anochor标签