自动建议键盘使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
var stringcount = 0;
var st = "";
var vv = "f";
function lookup2(e,inpstring)
{
lookup1(e.keyCode,inpstring);
}
function lookup1(j,inputstring)
{
var x= inputstring.length;
st = inputstring ;
if (inputstring.charAt(parseInt(x,10)-1) == " ")
{
stringcount = stringcount + 1;
}
else
{
var mySplitResult = inputstring.split(" ");
var stringtemp = "" ;
var w = 0;
for (w =0 ; w < stringcount ;w++)
{
stringtemp = stringtemp+ " "+ mySplitResult[w];
}
st = stringtemp;
lookup(mySplitResult[stringcount],inputstring);
}
}
function lookup(inputString,i) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+"" }, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(st.substring(1,st.length)+" "+thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>Type your county here:<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup2(event,this.value);" onblur="" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList"> </div>
</div>
</form>
</div>
</body>
</html>
这是我正在使用的代码。通过单击所需的选项可以访问自动建议框。如何使用键盘的上/下键滚动选项并使用 Enter 选择选项？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
var stringcount = 0;
var st = "";
var vv = "f";
function lookup2(e,inpstring)
{
lookup1(e.keyCode,inpstring);
}
function lookup1(j,inputstring)
{
var x= inputstring.length;
st = inputstring ;
if (inputstring.charAt(parseInt(x,10)-1) == " ")
{
stringcount = stringcount + 1;
}
else
{
var mySplitResult = inputstring.split(" ");
var stringtemp = "" ;
var w = 0;
for (w =0 ; w < stringcount ;w++)
{
stringtemp = stringtemp+ " "+ mySplitResult[w];
}
st = stringtemp;
lookup(mySplitResult[stringcount],inputstring);
}
}
function lookup(inputString,i) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+"" }, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(st.substring(1,st.length)+" "+thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form>
<div>Type your county here:<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup2(event,this.value);" onblur="" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList"> </div>
</div>
</form>
</div>
</body>
</html>
This is the code i am using. The auto-suggestion box is accessed by clicking on the desired option. How can i scroll through the option by using the up/down keys of the keyboard and select an option by using enter?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
看起来（因为您没有引用真正重要的代码）您的服务器端 ajax 端点返回了一个 HTML 无序列表，并将其粘贴到 suggestList div 中。这将是我的假设。您的 CSS 允许悬停伪选择器，因此鼠标支持看起来不错。
对于键盘支持，您需要为
keypress事件添加一个事件处理程序，可能在document上。当建议框显示时添加处理程序，当建议框关闭时将其删除。事件处理程序必须跟踪向上和向下箭头键以及 Enter。您必须在当前选定的 li 元素上添加和删除一个特殊的类（或者可能是一个 id），这意味着您必须跟踪有多少个元素需要滚动，以及哪些元素需要滚动。一项是当前突出显示的一项。因此，如果您看到向下箭头键，请将当前索引加一（如果您位于最后一个索引，请忽略该键）。从刚刚留下的 li 元素中删除特殊类，并将其添加到新元素中（显然，在 CSS 中相应地设置该类的样式）。当按下回车键时，您知道选择了哪个元素，因此返回它，或者用它做您想做的事情。
It looks like (because you have not quoted the really important code) that your server side ajax endpoint returns an HTML unordered list and this is pasted into the suggestionList div. That's going to be my assumption. Your CSS allows for the hover pseudo-selector so mouse support looks good.
For keyboard support, you are going to have add an event handler for the
keypressevent, probably on thedocument. Add the handler when the suggestion box is displayed, remove it when it is dismissed.The event handler will have to track the up and down arrow keys as well as enter. You will have to add and remove a special class (or maybe an id) on the
lielement that is currently selected, which means you will have to track how many elements there are to scroll through, and which one is the currently highlighted one. So, if you see the down arrow key, add one to the current index (if you're at the last one, ignore the key). Remove the special class from thelielement you just left and add it to the new one (obviously style the class accordingly in your CSS). When the enter key is pressed you know which element is selected, so return it, or do what you want with it.