[PHP, jQuery Tutorial] 검색어 자동완성 구현하기 만화책 제목으로 검색할 때, 앞부분만 맞으면 아래에 목록을 표시하는 기능을 구현하였다. 요즘은 너무나도 흔한 기능이지만, 꽤 오랫동안 구현하고자 생각만 하다가 이번 리뉴얼에 맞춰서 작업을 했다. 처음에 개념이 잘 안 잡혀서 고생한 탓에, 최소한의 소스로 정리하였다. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
#display {
width:100%;
display:none;
position:absolute;
z-index:9999;
float:right;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box {
padding:4px;
font-size:12px;
height:80px;
background:#FFFFFF;
color: #333333;
}
.display_box:hover {
background:#fcffaa;
color: black;
cursor: pointer;
}
.boximage {
float:left;
margin-right:10px;
}
</style>
<script>
$(document).ready(function () {
$("#keyword").keyup(function() {
var keyword = $(this).val();
var dataString = 'searchword='+ keyword;
if(keyword=='') {
$("#display").hide();
} else {
$.ajax({
type: "POST",
url: "suggestions.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
} return false;
});
});
function goDetail(no) {
document.location.href="detail.php?no="+no;
}
function checkSearch() {
var searchKeyword=document.getElementById("keyword").value;
if(!searchKeyword.trim())
alert('검색어를 입력해주세요');
else {
location.href='searchresult.php?q='+searchKeyword;
}
}
</script>
</head><!--/head-->
<body>
<form action="javascript:checkSearch();">
<div class="input-group">
<input name="keyword" id="keyword" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" type="button" onclick="javascript:checkSearch('keyword');"><i class="icon-search"></i></button>
</span>
</div>
<div id="display">
</div>
</form>
</body>
</html> <?php
if($_POST) {
$q=$_POST['searchword'];
$result=mysql_query("SELECT * FROM table_name WHERE title LIKE '$q%' LIMIT 5");
while($row=mysql_fetch_array($result)) {
$title=stripslashes($row[title]);
$author=stripslashes($row[author]);
$no=$row[no];
$cover_img=$row[cover_img];
echo "
<div class='display_box' onclick='javascript:goDetail($no);'>
<img src='images/$cover_img' width='50' class='boximage'/><b>$title</b><br/>$author
</div>
";
}
}
?>
목록은 최대 5개까지만 보여지도록 설정하고, 직접 클릭하면 해당 만화 정보 페이지로 넘어가고 엔터키를 치면 입력한 검색어에 해당하는 검색결과가 나오도록 하였다. 키를 하나씩 입력할 때마다 쿼리를 돌리느라 약간의 딜레이가 있다는 점, 한글 형태소 처리가 안 되어 있어서 한글자 한글자 완성될 때만 유효하다는 점 (‘드ㄹ’ 까지만 쓰면 ‘드래곤 볼’ 이 안 나옴), 키보드 위/아래 버튼으로 고를 수 없다는 점이 남은 개선사항이다. 다른 것은 몰라도 키보드 처리는 필수인 것 같아서, 빨리 처리해봐야겠다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css"rel="stylesheet"> <link href="css/font-awesome.min.css"rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <style> #display { width:100%; display:none; position:absolute; z-index:9999; float:right; border-left:solid 1px#dedede; border-right:solid1px#dedede; border-bottom:solid 1px#dedede; overflow:hidden; } .display_box { padding:4px; font-size:12px; height:80px; background:#FFFFFF; color:#333333; } .display_box:hover { background:#fcffaa; color:black; cursor:pointer; } .boximage { float:left; margin-right:10px; } </style> <script> $(document).ready(function (){ $("#keyword").keyup(function() { var keyword=$(this).val(); vardataString='searchword='+ keyword; if(keyword==''){ $("#display").hide(); }else{ $.ajax({ type: "POST", url:"suggestions.php", data: dataString, cache:false, success: function(html){ $("#display").html(html).show(); } }); } returnfalse; }); }); functiongoDetail(no){ document.location.href="detail.php?no="+no; } functioncheckSearch(){ var searchKeyword=document.getElementById("keyword").value; if(!searchKeyword.trim()) alert('검색어를 입력해주세요'); else{ location.href='searchresult.php?q='+searchKeyword; } } </script> </head><!--/head--> <body> <form action="javascript:checkSearch();"> <div class="input-group"> <input name="keyword"id="keyword"type="text"class="form-control"> <span class="input-group-btn"> <button class="btn btn-danger" type="button"onclick="javascript:checkSearch('keyword');"><iclass="icon-search"></i></button> </span> </div> <div id="display"> </div> </form> </body> </html>
출처 : http://www.dev-diary.com/archives/4141 |
Php 검색어 자동완성 - Php geomsaeg-eo jadong-wanseong
관련 게시물
저작권 © 2024 nguoilontuoi Inc.
