자동완성
본문
<div class="keyword_textbox">
<input type="text" name="s_keyword" id="s_keyword" placeholder="<?=ow_?>style="width:98%; height:43px; font-size:14px; border:1px solid #FFFFFF; padding-left:10px;" autocomplete="off">
<div class="keyword_listbox" style="display:none;">
<div class="keyword_nameslist"></div>
</div>
</div>
<script>
<?php
$form_id = "s_keyword";
?>
$(document).ready(function() {
$('.keyword_listbox').hide();
$('#<?=$form_id?>').keyup(function () {
var uid = $('#<?=$form_id?>').val();
var data='ct_str='+uid;
$.ajax({
type:"POST",
url:"<?=OW_;?>",
data:data,
success:function(html) {
if(html)
{
$('.keyword_listbox').show();
$('.keyword_nameslist').html(html);
$('li').hover(function(){
$(this).addClass('keyword_hover');
},function(){
$(this).removeClass('keyword_hover');
});
$('li').click(function(){
$('#<?=$form_id?>').val($(this).text());
$('.keyword_listbox').hide();
});
}
else
{
$('.keyword_listbox').hide();
}
}
});
return false;
});
});
</script>
여기서
위 소스에서 ↓ 누르면 포커스가 <li>1<li>
↓ 한번 더 누르면 <li>2<li>
↓ 또누르면 <li>3<li> 이게 하고
↑누르면 다시<li>2<li>
다시또누르면 <li>1<li> 하는 방법이있나요
<div class="keyword_nameslist">
안에 디비에서 가져온 것들을뿌려주는 거 같은데
</div>
여기 를 키보드 상하 버턴으로 선택 하고 엔터를 누르면 그 선택 값이
<input type="text" name="s_keyword" id="s_keyword" 안에 들어가는 방법이 있나해서요
슈와이 님이 께서
var i = -1, obj = $('#keyword_nameslist li');
$('#s_keyword').on('keydown', function(e) {
switch(e.which) {
case 38: // up
i = (--i) % 6;
obj.removeClass('active');
obj.eq(i).addClass('active');
break;
case 40: // down
i = (++i) % 6;
obj.removeClass('active');
obj.eq(i).addClass('active');
break;
case 13:
$(this).val(obj.eq(i).text());
break;
}
});
이러한 소스를 주셔는데요
obj.removeClass('active');
obj.eq(i).addClass('active');
부분이 문제 가되는 거같아요 어떠게 바꿔야 할까요?