javascript - 搜索框优化问题
本文介绍了javascript - 搜索框优化问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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>无标题文档</title>
</head>
<body>
<input type="text" id="input" />
<div id="div"></div>
<script>
var sData=["a","b","bes","best","ab","app","api","hate","hello","m","mm","mum"];
var input=document.getElementById("input");
var div=document.getElementById("div");
var m=0;
input.onkeyup = function(){
var len=div.childNodes.length;
if(event.keyCode !== 40&&event.keyCode !== 38){
for(var j=0;j<len;j++){
if(len){
div.removeChild(div.childNodes[0]);
}
}
var value=document.getElementById("input").value;
var arr=[];
for(var v of sData){
if(v.search(value)==0){
arr.push(v);
}
}
for(var i=0;i<arr.length;i++){
var p=document.createElement("p");
var text=document.createTextNode(arr[i]);
p.appendChild(text);
div.appendChild(p);
};
}
var p=document.getElementsByTagName("p");
div.onclick=function(){
input.value=event.target.innerHTML;
}
for(var k=0;k<p.length;k++){
p[k].onmouseover=function(){
this.style.backgroundColor="red";
}
p[k].onmouseout=function(){
this.style.backgroundColor="";
}
}
function show() {
for (var l = 0; l < p.length ; l++) {
if( p[l].style.backgroundColor == "red"){
p[l].style.backgroundColor = "";
}
}
p[m - 1].style.backgroundColor="red";
input.value=div.childNodes[m-1].innerHTML;
}
if(event.keyCode == 40){
if(m==len){
m=1;
} else {
m += 1;
}
show();
}
if(event.keyCode==38){
if(m == 0){
m = len;
} else {
m -= 1;
if(m == 0){
return; //这个搜索框通过按向下的箭头，从最底下的选项切换到最上边的选项没有问题。但当按向上的箭头时，从第一个选项切换到最后一个选项要按两次。问题应该在这里。但我不知道怎么优化了。请各位指点。
}
}
show();
}
};
</script>
</body>
</html>解决方案
首先，你的m的取值范围应该是1-len,并不会取到0，所以keycode == 38 里if判断是没有什么意义的
第二，事实上up键的逻辑几乎是一样的，都是m--，只是当m为最顶部一个，即m == 1时，将m置为最后一个，即m = len
所以，keycode == 38 内部的代码应该这样就可以了
m -= 1;
if(m == 0){
m = len;
}
show();不太会插入代码，请见谅。。。
这篇关于javascript - 搜索框优化问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
