JQuery 기반 Autocompete 구현을 해보기로 하고 검색해서 개념을 잡고 테스트했다.
jQuery 를 모를 때는 엄두도 낼 수 없었는데 jQuery 에 대한 기본 개념을 조금 이해하고 다양한 플러그인(plugin)들을 테스트 해보고 있다.
http://www.bewebdeveloper.com/tutorial-about-autocomplete-using-php-mysql-and-jquery 에서 제공한 소스코드를 받아서 윈도우 AutoSet9 에서 설치하였다.
ajax_refresh.php 코드는 내가 사용하는 방식의 코드가 아니라서 수정했다.
나머지 파일은 약간 수정했다.
=== ajax_refresh.php ===
<?php
include_once 'connect.php';
$keyword = $_POST['keyword'];
$sql = "SELECT * FROM country WHERE country_name LIKE '%".$keyword."%' ORDER BY uid ASC LIMIT 0, 10";
$result = mysqli_query($db, $sql);
while($row = mysqli_fetch_assoc($result)){
$list[] = $row;
}
foreach ($list as $rs) {
// put in bold the written text
$country_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['country_name']);
// add new option
echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['country_name']).'\')">'.$country_name.'</li>';
}
?>
=== autocomplete.js ===
function autocomplet() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#uid').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
}
});
} else {
$('#country_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#uid').val(item); // 실제 DB와 연동하여 값을 넘겨줘서 검색해야 하는 부분
// hide proposition list
$('#country_list_id').hide();
}
파일은 원 사이트에서 받아도 되고 첨부한 파일을 받아서 DB 관련 부분을 수정해서 테스트 해봐도 된다.
본 첨부파일에는 dbconnect.php 파일도 같이 포함되어 있고, DB 스키마를 내가 사용하는 uid로 수정한 것도 포함되어 있다. 즉 받아서 DB에 테이블 생성하고 경로만 지정해주면 바로 동작이 가능하다.
mysqli 기반으로 테스트 한 것이므로 mysql 를 사용하는 환경이라면 약간 수정해야 한다.
autocomplete_for_php.zip이 정도로도 개념 이해는 도움은 많이 되는데 다른 것도 검색해서 테스트해보고 기록해 두려고 한다.
문제점 : 한글 자동완성 검색 안됨
한글검색되는 코드 (추천)
구글링을 해보니 코드가 유사하게 몇개의 사이트에서 검색된다. 이용하기는 이 코드가 훨씬 편할 거 같기는 하다.
원 소스 사이트는 https://jqueryui.com/autocomplete/ 다. 여기서 데모 실행부터 해보면 된다.
이 사이트에 가면 유용한 기능이 많다. 기능 적용이 매우 단순하다.
아래 코드 연결된 버전 정보로 해도 되지만 jqueryui.com 사이트에 적용된 최신버전으로 적용해도 된다.
사용법
1. jquery-ui.min.css, jquery-ui.min.js 링크 추가 또는 파일 다운로드 받아서 폴더 경로 추가 2. <input type='text' name='country' value='' id='auto'> input 에 ID 추가하거나 Class 추가 3. jQuery 코드 $('#auto').autocomplete({ source: "autosearch.php", // 타이핑시 보여질 내용 minLength: 1 }); 4. PHP 코드 구현(autosearch.php) |
<?php |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- 최신버전으로 구해서-->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$(".auto").autocomplete({
source: "autosearch.php",
minLength: 1
});
});
</script></head>
<body>
<form action='' method='post'>
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
</form>
</body>
</html>
=== autosearch.php ===
이 부분 코드는 내가 사용하는 방식으로 수정했다.
<?php
include_once 'connect.php';
if (isset($_GET['term'])){
$return_arr = array();
$keyword = $_GET['term'];
$sql = "SELECT country_name FROM country WHERE country_name LIKE '%".$keyword."%'";
$result = mysqli_query($db, $sql);
while($row = mysqli_fetch_assoc($result)){
$return_arr[] = $row['country_name'];
}
echo json_encode($return_arr);
}
?>
여기서 검색어 결과가 너무 많이 나오는 것이 싫다면 LIMIT 를 사용해서 제한하면 된다.
$sql = "SELECT distinct(country_name) FROM country WHERE country_name LIKE '%".$keyword."%' LIMIT 10";
검색할 내용이 너무 많다면 별도로 검색한 결과를 별도 테이블로 작성해서 그 검색결과를 자동완성 검색어로 불러들려도 된다. 이 경우에는 별도로 코딩이 좀 필요하다.
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [jQuery] How to enable or disable my Internet browser's Autocomplete (1) | 2016.12.31 |
|---|---|
| [jQuery] 자기자신 파일 갱신 처리할 때 (0) | 2016.12.31 |
| [Jquery] 부모창 제어/접근 (0) | 2016.12.18 |
| [jQuery] form문에서 submit 시 window.open 으로 action 처리 하기 (0) | 2016.12.18 |
| [jQuery] 실시간 업데이트(real time page update) (0) | 2016.12.17 |
Link2Me
