쇼핑몰 검색창에 연관검색어 기능을 달았는데 방향키로 선택하게 하는 방법ㅠㅠㅠㅠ있나요..
본문
정말 초보입니당..
현재 쇼핑몰 검색창에 연관검색어 기능이 필요하여 특정 제품을 검색하면 DB에 등록되어있는 제품들을 가져와 아래에 검색어추천을 띄우도록 연결했는데
방향키로 리스트를 움직이고 엔터로 선택하면 바로 검색이 되게 하고 싶습니다 ㅠ
지금은 추천 검색어에 마우스 올리면 색이 변하고, 누르면 검색이 되는것까지 되지만 방향키로 리스트 사이를 왔다갔다하는 방법을 모르겠네요ㅠ...
<html>
<input type="text" name="q" value="<?php echo stripslashes(get_text(get_search_string($q))); ?>" id="sch_str" required placeholder="검색어를 입력해주세요" onkeyup="searchitem();" autocomplete="off"> //검색창
<div class="search_list">
<ul style="position:relative">
<li id="preview" class="ulsrc">
</li>
</ul>
</div>//연관검색 리스트
<javascript>
function searchitem(){
if($('#sch_str').val()=='')
{
$("#preview").hide();
return;
}
let sch = document.getElementById("sch_str").value;
$.ajax({
type:"POST",
url: "search_source.ajax.php",
data:{
method:"check",
sch_item:sch,
},
success:function(data){
var json = JSON.parse(data);
if(json["result"] == 200) {
//alert(json["search_source"][0]);
var searchSource = json["search_source"];
var preview = $("#preview");
$("#preview").empty();
for(i=0;i<searchSource.length;i++){
$("#preview").show();
$("#preview").append('<a href="http://mall.highbuff.com/shop/search.php?q='+json["search_source"][i]+'" style="color:#fff;"><li id="item_list"><p>'+json["search_source"][i]+'</p></li></a>');
}
}
else {
alert("정상적인 접근이 아닙니다. 고객센터로 문의해주시기 바랍니다.");
}
},
beforeSend:function(){
},
complete:function(){
},
error:function(e){
alert("데이터 전송 지연이 발생합니다. 잠시후에 시도해주세요.");
return;
},
timeout:5000
})//ajax;
}
답변을 작성하시기 전에 로그인 해주세요.