Question

我有一个输入文字，如搜索框

但是当出现te菜单时，我想用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>

Answer 1

<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>

我在搜索框中写入菜单时带有NEXT

1 个答案: