다음과 메뉴 내가 검색 상자</p> <p>하지만 테 메뉴가 나타날 때, 나는 다음과 다음 라인을 (선택합니다 같은 입력 텍스트가

Question

검색 상자에 쓰기 동안)하지만 난

수 없습니다

내가 원하는 것은 검색 상자에 글을 쓸 때 클릭하지 않고 위 또는 아래 키를 누르면 표시된 결과가 선택된다는 것입니다.

나는이 내 코드입니다

검색 상자에 무엇을 찾고 있어요 쓰기로

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