Jquery 자동완성 검색기능 추가하기 (Autocomplete) 한글호환
본문
오토컴플리트가 한글을 완벽히 호환하지 못합니다.
어떤 방법 있으시면 공유 부탁드려요.
문제는 전지적을 검색하면 가끔 전지저로 검색이 됩니다. 항상 그러지는 않아요 ㅡ.ㅡ
한글만 그러네요.
<script>
$(document).ready(function() {
// 오토컴플리트 (검색어 자동완성)
$("#thema_wrapper").on("keyup", "#stx", function(){
var stx = $(this).val(); /* 입력한 검색어 */
$(this).autocomplete({
source:function(request, response) {
$.getJSON(g5_url+"/_search_popular.php", {
/* _search_popular.php 파일로 넘길 변수값을 이곳에 작성하시면 됩니다. GET 으로 넘어갑니다. */
/* 콤마로 구분하시면 되요 ex) sfl:"wr_subject", stx:stx, ........ */
stx : stx
}, response);
},
minLength:2, /*최소 검색 글자수*/
delay: 150, /* 검색어 입력후 표시되는 시간 - 숫자가 클수록 느리게 출력 */
focus:function(event, ui) {
/* 검색을 통하여 넘어온 값을 여기서 처리 */
console.log(ui.item.value); /* 콘솔 확인용이므로 삭제하거나 주석처리 하여도 됩니다. */
},
close:function(event, ui) {
}
})
});
// 오토컴플리트 종료
});
</script>
<?php
include_once('./_common.php');
$stx = $_GET['stx'];
$sql = "select
distinct(pp_word)
from
g5_popular
where
pp_word like '%".$stx."%'
group by
pp_word
order by
pp_word asc limit 10 ";
$result = sql_query($sql,true);
// value : 검색된 단어이며, input 값으로 넘어갑니다.
// label : 특정검색어를 입력시 자동완성 리스트로 표시됩니다. (다양하게 응용가능)
while($row=sql_fetch_array($result)) {
$arr[] = array(
"value" => $row['pp_word'],
"label" => $row['pp_word']
);
}
echo json_encode($arr);
?>
답변 1
해결 했습니다.
autocomplete가 버전업하면서 생긴 버그라네요.
event.preventDefault();
삽입해 주니까 문제 없습니다.
<script>
$(document).ready(function() {
// 오토컴플리트 (검색어 자동완성)
$("#thema_wrapper").on("keyup", "#stx", function(){
var stx = $(this).val(); /* 입력한 검색어 */
$(this).autocomplete({
source:function(request, response) {
$.getJSON(g5_url+"/_search_popular.php", {
/* _search_popular.php 파일로 넘길 변수값을 이곳에 작성하시면 됩니다. GET 으로 넘어갑니다. */
/* 콤마로 구분하시면 되요 ex) sfl:"wr_subject", stx:stx, ........ */
stx : stx
}, response);
},
minLength:2, /*최소 검색 글자수*/
delay: 150, /* 검색어 입력후 표시되는 시간 - 숫자가 클수록 느리게 출력 */
focus:function(event, ui) {
event.preventDefault();
/* 검색을 통하여 넘어온 값을 여기서 처리 */
// console.log(ui.item.value); /* 콘솔 확인용이므로 삭제하거나 주석처리 하여도 됩니다. */
},
close:function(event, ui) {
}
})
});
// 오토컴플리트 종료
});
</script>