jquery 在搜索框中写入内容时使用“下一步”菜单

mrphzbgm 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(144)

我有一个像搜索框一样的输入文本
但是当菜单出现时，我想用Next（）选择下一行，但是我不能
我想要的是，当我在搜索框中写入时，显示的结果，当你按向上或向下键时被选中，而不需要点击。
当我在搜索框中输入要查找的内容时，可以用箭头上下移动的菜单
这是我的密码

<script type="text/javascript" src="jq/jq.js"></script>
<script type="text/javascript">
$(".listado_buscador a").keyup(function(arrow){
    if(arrow.keyCode == 40){
  $(this).nextAll('.listado_buscador a:first').focus();
    }else if(arrow.keyCode == 38){
  $(this).prevAll('.listado_buscador a:first').focus();
    }

    });

});
</script>

<div class="contenedor_buscador">
<input name="buscador" type="text" class="buscador" id="buscador" placeholder="Ingresa tu búsqueda por negocio, giro o ciudad" maxlength="70">
<div class="listado_buscador">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</div>
</div>

jquery

来源：https://stackoverflow.com/questions/27493383/menu-with-next-while-i-write-in-a-search-box

1条答案

按热度按时间

bweufnob1#

<style type="text/css">
.contenedor_buscador {
    margin: 0px auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.buscador {
    background: #FFFFFF;
    font-family: Futura, Verdana, Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 10px;
    padding-left: 60px;
    font-size: 14px;
    outline: none;
    border: #DFDFDF 1px solid;
    border-radius: 5px;
    font-size: 18px;
    color: #333;
    margin-bottom: -1px;
}
.listado_buscador {
    float: left;
    width: 100%;
    padding: 3px 3px 2px 3px;
    box-sizing: border-box;
    background: #F3F3F3;
    text-align: justify;
    border-radius: 5px;
    border: 1px solid #DDD;
}
.listado_buscador a:link, .listado_buscador a:visited {
    text-decoration: none;
    background: #FFF;
    width: 100%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
    font-family: Futura, Verdana, Arial, sans-serif;
    border-radius: 5px;
    color: red;
    margin-bottom: 1px;
}
.listado_buscador a:hover {
    background: #F8F8F8;
}
.listado_buscador a:focus, .listado_buscador a:active {
    background: #EEE;
    outline: none;
}
.focus {
    background: gray;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".listado_buscador a").keyup(function(arrow){
    if(arrow.keyCode == 40){
  $(this).nextAll('.listado_buscador a:first').focus();
    }else if(arrow.keyCode == 38){
  $(this).prevAll('.listado_buscador a:first').focus();
    }

    });

});
</script>

<div class="contenedor_buscador">
  <input name="buscador" type="text" class="buscador" id="buscador" placeholder="Ingresa tu búsqueda"  maxlength="70">
  <div class="listado_buscador"> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </div>
</div>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 在搜索框中写入内容时使用“下一步”菜单

1条答案

相关问题

热门标签

最新问答