Question

我创建了一个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;'>&nbsp;
    </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 &#169; 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>

Answer 1

您需要抓住keypress事件而不是keydown。 keypress同时是keyup和keydown，它可以帮助您抓住导航向上和向下键的按键。

Answer 2

您需要进行一些自定义，但请从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}

使用键盘上下导航

2 个答案: