- 33
- 0
写一个搜索框键盘选择联想结果,但是下键是从第二个开始的,但是我不从第二个开始又不行,因为我“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","")
})
})
})
部分代码已经贴出,主要问题在键盘下键部分,求帮我拍一下,实在是晕了。。。
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
