极客观点
项目管理
HarmonyOS
写一个搜索框键盘选择联想结果，但是下键是从第二个开始的，但是我不从第二个开始又不行，因为我“keycode == resultLength-1”的时候就让keycode=0了，所以=0的时候我只能让它先++，这种情况就是只有第一次按下它才从第二个结果开始，其他都正常。。。我不知道咋写了，求支出小弟的逻辑错误，昨天弄了一天没整明白。
html代码：
<form action="" name="" class="clearfix">
<div class="search-btn">
<i class="fa fa-search"></i>
</div>
<ul class="associate">
</ul>
</form>JS代码
<script>
//取消文本框enter默认提交事件
$(".search-content").keydown(function(event){
switch(event.keyCode){
case 13 : return false;
}
})
//搜索框部分
var arr = ["上城区","华龙家园","望江街道","华龙家园","滨江区","华龙家园","江干区","华龙家园","下城区","1846375XXXX","17600483XXX","18463758XXX","hangzhouhangzhou","05716482558"];
var str = "";
var searchNum;
var keycode = 0;
$(".search-content").keyup(function(event){
//var resultLength = $(".associate li").length;
str = "";
searchNum = 0;
var search_content = $(this).val();
var reg = new RegExp("^"+search_content,"i");
if(search_content.trim().length !== 0){
$(".associate").css("display","block");
for(var i in arr){
if(arr[i].match(reg) && searchNum < 11){
if(/^1(3|4|5|7|8)\d{1,9}$/.test(search_content)){
str += "<li id='1'><i class='fh fh-icon-phone'></i>"+arr[i]+"</li>"+"<li id='2'><i class='fh fh-computer-list'></i>"+arr[i]+"</li>";
searchNum++;
}else{
str += "<li>"+arr[i]+"</li>"
searchNum++;
}
}
}
$(".associate").html(str);
}else{
str = "";
$(".associate").css("display","none");
}
//键盘辅助搜索结果的选择
var resultLength = $(".associate li").length;
if(event.keyCode == 38 && keycode < resultLength+1){
//键盘上键
if(keycode == resultLength){
keycode--;
class1()
}else if(keycode == 0){
keycode = resultLength-1;
class1()
}else{
keycode--;
class1()
}
//键盘下键
}else if(event.keyCode == 40 && keycode > -1){
if(keycode == resultLength-1){
keycode = 0;
class1()
}else if(keycode == 0){
keycode++;
class1()
}else{
keycode++;
class1()
}
//enter键
}else if(event.keyCode == 13){
$(".search-content").val($(".associate").find("li:eq("+keycode+")").text());
$(".associate").css("display","none")
}
//封装一个方法
function class1(){
var oLi = $(".associate").find("li:eq("+keycode+")")
oLi.css("background","rgb(226, 223, 223)").siblings().css("background","");
//oLi.addClass("modern")
}
//点击搜索结果改变搜索框的value
$(".associate li").each(function(){
$(this).click(function(){
$(".search-content").val($(this).text());
localStorage.setItem("numId",$(this).attr("id"))
})
$(this).hover(function(){
$(this).css("background","rgb(226, 223, 223)")
},function(){
$(this).css("background","")
})
})
})部分代码已经贴出，主要问题在键盘下键部分，求帮我拍一下，实在是晕了。。。
html5
之前写过一个用百度智能提示练习jsonp的，里面有上下键选择功能，仅供参考。