求js或jquery实现类似百度的键盘上下键选取值，回车选取值，和鼠标选取值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求js或jquery实现类似百度的键盘上下键选取值，回车选取值，和鼠标选取值相关的知识，希望对你有一定的参考价值。
光标移到下拉的文字上然后显示到搜索框里
是不是出现下拉内容 然后要使用键盘上的上下键 高亮 回车将高亮的内容显示在搜索框中？追问对
参考技术A <!DOCTYPE html><html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
.currentbackground-color:red
</style>
</head>
<body>
<input id="SearchResult" type="text"/>
<ul id="ulSearch">
<li>中海创集团</li>
<li>福大自动化</li>
<li>奥迈软件</li>
<li>自控规划部</li>
<li>爱普科技</li>
<li>IAP</li>
<li>ISEE</li>
<li>联排联调</li>
<li>水系</li>
<li>云计算</li>
</ul>
<script>
var list = document.getElementById("ulSearch").getElementsByTagName("li");
var index = -1;
function addIndex()
index = index>=9 ? 0 : ++index;
return index;
function reduceIndex()
index = index <= 0 ? 9 : --index;
return index;
document.onkeydown = function(e)
e = e || window.event;
switch(e.keyCode)
case 13:
var t = document.getElementById("ulSearch").getElementsByTagName("li")[index].innerHTML;
document.getElementById("SearchResult").value = t;
break;
case 38:
reduceIndex();
setLiColorByClass();
break;
case 40:
addIndex();
setLiColorByClass();
break;
function setLiColorByClass()
for(var i = 0,len=list.length; i<len; i++)
list[i].className = i==index ? "current" : "";
;
</script>
</body>
</html> 参考技术B 你是想获取键盘事件么？那你自己在网上查一下keyCode，然后自己写js本回答被提问者采纳 参考技术C 你上网搜ajax自动补全。那个是自动补全技术追问
我不是要补全的效果
07.30《jQuery》——2.2使用键盘上下左右键控制div框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bbb { height: 300px; width: 300px; background-color: aliceblue; position: relative; } </style> <script src="../jquery-3.2.1/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { $("#left").click(function() { $("div:not(:animated)").animate({ left: "-=100" }, 50); }); $("#right").click(function() { $("div:not(:animated)").animate({ left: "+=100" }, 50); }); $("#up").click(function() { $("div:not(:animated)").animate({ top: "-=100" }, 50); }); $("#down").click(function() { $("div:not(:animated)").animate({ top: "+=100" }, 50); }); }) $(document).keydown(function() { if(event.keyCode == ‘37‘) { $("div:not(:animated)").animate({ left: "-=100" }, 50); } if(event.keyCode == ‘39‘) { $("div:not(:animated)").animate({ left: "+=100" }, 50); } if(event.keyCode == ‘38‘) { $("div:not(:animated)").animate({ top: "-=100" }, 50); } if(event.keyCode == ‘40‘) { $("div:not(:animated)").animate({ top: "+=100" }, 50); } }) </script> </head> <body> <button id="left">left</button> <button id="right">right</button> <button id="up">up</button> <button id="down">down</button> <div id="bbb"></div> </body> </html>
代码通过添加keydown方法，实现通过键盘操作div框移动的功能。
以上是关于求js或jquery实现类似百度的键盘上下键选取值，回车选取值，和鼠标选取值的主要内容，如果未能解决你的问题，请参考以下文章