공부/웹

Bootstrap typeahead 자동완성기능 코드

오피스엑소더스 2019. 10. 23. 19:06

조건 : bootstrap-3-typeahead.js 다운로드 필수(https://github.com/bassjobsen/Bootstrap-3-Typeahead)

개발환경 :

- Spring Boot 2.1.8, MyBatis, Bootstrap 최신, jQuery 최신(2019-10-23 기준)


1. jsp(모달부분만)

1
2
3
4
5
<div class="col-md-4">
    <label for="_coup_reg_id">등록ID</label>
    <input type="text" class="form-control" id="_coup_reg_id" aria-describedby="_coup_reg_id_desc" placeholder="쿠폰을 지급할 ID 입력.">
        <small id="_coup_reg_id_desc" class="form-text text-muted">쿠폰지급</small>
</div>
cs

 


2. javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(document).on('show.bs.modal','#_coupon_detail_info_modal', function () {
    console.log('modal on show!!!!!!!!!!!');
    var $input = $("#_coup_reg_id");
    $input.typeahead({
      source: getTypeaheadData()
    });
    
    //DB값과 같아야만 저장버튼 활성화
    $input.on('keyup change',function() {
        $input.typeahead({
              source: getTypeaheadData()
        });
        var current = $input.typeahead("getActive");
        if (current) {
            if (current.name == $input.val()) {
                $("#_save_coup_detail_info").removeAttr('disabled');
                return true;
            }
        }
        $("#_save_coup_detail_info").attr('disabled', 'disabled');
    });
 
});
 
function getTypeaheadData(){
    
    //디폴트값
    var dataArr = [
        {id: "someId1", name: "Display name 1"},
        {id: "someId2", name: "Display name 2"}
    ];
    
    $.ajax({
        type : 'get',
        url : "/admin/mypage/points/getmembers",
        dataType : "json",
        data : {
            value : $("#_coup_reg_id").val()
        },
        async: false,
        success : function(data) {
            dataArr = new Array();
            $.each(data, function(index, item) {
                dataArr.push( {id: "typeahead", name: item } );
            });
        }
    });
    
    return dataArr;
}
cs


3. java, xml

-controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**Ajax 통신을 통해 아이디 리턴(autocomplete) 
 * @param value    
 * @param pcp
 * @return
 */
@ResponseBody
@RequestMapping(value = "/points/getmembers", method = {RequestMethod.POST, RequestMethod.GET} )
public List<String> getMembers(Model model, String value, Principal prc) throws Exception{
    log.info("getMembers()" + value);
 
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("value", value);
    map.put("id", prc.getName());
        
    return myUsedService.getMemberid(map);            
}
cs

-DAO

1
2
3
4
5
@Override
public List<String> getMemberid(Map<String, Object> map) { // 멤버 아이디를 배열로 가져온다
    List<String> Member = sqlSession.selectList(ns + "getMemberid", map);
    return Member;
}
cs

-mapper(mybatis)

1
2
3
4
5
6
7
8
9
<!-- 아이디 조회 -->
<select id="getMemberid" resultType="java.lang.String" parameterType="java.lang.String">
    SELECT id 
    FROM rhy_mem_p
    WHERE ID LIKE CONCAT('%',#{value},'%')
    AND subscribe = 0
    AND id not in(#{id})
    ORDER BY CHAR_LENGTH(id)
</select>
cs