본문 바로가기
프로그래밍 언어/jQuery

[jQuery] plugin(제이쿼리 플러그인)으로 검색 자동완성(autocomplete) 구현하기

by 우림 2015. 7. 6.

자동완성을 구현할 일이 생겨서 찾아보던 차에 좋은 plugin을 발견했네요.

jQuery Autocomplete 플러그인인데요.

http://dndrb0.blog.me/120205427972

저는 이분이 올려놓으신 거 좀 수정해서 다시 올려봅니다.

Autocomplete.zip => 다운로드 받아서 실행해 보세요.


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
51
52
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자동완성</title>
<script type="text/javascript" src="jquery/lib/jquery.js"></script>
<script type='text/javascript' src='jquery/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='jquery/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='jquery/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" />
</head>
<body>
<script>
 
    var availableTags = [
                            '가나',
                            '가나쵸콜렛',
                            '갈갈이 삼형제',
                            '북마크',
                            '북까페',
                            '엄마',
                            '아빠',
                            '북소리',
                            '여러분',
                            '소문',
                            '소문난 식당',
                            '나나나',
                            '쇼',
                            '쇼팽',
                            '모나미',
                            '한강',
                            '강강수월래',
                            '강촌',
                            '제주도',
                            '삼총사',
                            '먹보',
                            '먹소리',
                            '수박',
                            '수박 겉핥기'
                        ];
 
    $(document).ready(function() {
        $("#searchbox").autocomplete(availableTags,{ 
            matchContains: true,
            selectFirst: false
        });
    });
    
</script>
</body>
</html>
 
cs



글자 순서대로 검색되게 하려면 이렇게 하시면 되구요.

matchContains: true


입력한 글자가 들어간 모든 검색어를 보여주려면 아래처럼 하시면 됩니다.

matchContains: false



댓글