그누보드의 관리자 화면에서 포인트를 관리하는 페이지가 있습니다.
해당 부분에서 특정 회원에서 포인트를 지급 할 경우 아이디가 기억나지 않거나 할 때에
회원아이디 자동완성 기능을 추가해서 사용할 수 있습니다.


위와 같이 k만 회원아이디에 넣더라도 자동완성 기능으로 모든 회원을 검색할 수 있습니다.
우선 adm/point_list.php 파일에 다음과 같은 코드를 추가합니다.
[code]
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
//회원아이디 자동완성
$("#mb_id").autocomplete({
minLength: 1,
maxHeight: 200,
autoFocus:true,
source: function(request, response) {
$.ajax({
url: "<?php echo G5_BBS_URL?>/ajax.member_chk.php?term="+$("#mb_id").val(),
type: "GET",
dataType: "json",
success: function(data) {
response($.map(data, function(item) {
return {
label: item.mb_id + " [" + item.label+ "]",
mb_id: item.mb_id,
member_name : item.label
};
}));
}
});
},
select: function(event, ui) {
$("#mb_id").val(ui.item.mb_id);
console.log("Member Id : " + ui.item.mb_id);
console.log("Member Name : " + ui.item.member_name);
return false;
},
open: function(event, ui) {
$("#mb_id").css("z-index", 1000);
},
focus: function (event, ui) {
event.preventDefault(); // Prevent the default focus behavior.
}
});
</script>
[/code]
이후 bbs/ajax.member_chk.php 파일을 다음과 같이 생성합니다.
[code]
<?php
include_once('../common.php');
$search = trim(strip_tags($_GET['term']));
$sql = "select * from {$g5['member_table']} where mb_id like '$search%';";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$return_arr[] = array("mb_id" => $row['mb_id'], "label" => $row['mb_name']);
}
echo json_encode($return_arr);
?>
[/code]
해당 자동완성 기능을 응용하여 여러가지(검색어 등)를 구현할 수 있으니
처음 구현해보시는 분들은 이리저리 수정해가며 사용해보시면 도움될 것 같습니다.
최대한 간단하게 만든다고 만들었는데 수정해야할 것이 있다면 말씀부탁드립니다.
댓글 16개
게시글 목록
| 번호 | 제목 |
|---|---|
| 23966 | |
| 23963 | |
| 23953 | |
| 23949 | |
| 23938 | |
| 23935 | |
| 23933 | |
| 23928 | |
| 23919 | |
| 23918 | |
| 23917 | |
| 23910 | |
| 23902 | |
| 23901 | |
| 23897 | |
| 23894 | |
| 23893 | |
| 23891 | |
| 23885 | |
| 23872 | |
| 23870 | |
| 23862 | |
| 23859 | |
| 23853 | |
| 23845 | |
| 23838 | |
| 23827 | |
| 23819 | |
| 23805 | |
| 23801 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기