티스토리 뷰

Project/FrontEnd

[JQUERY] autocomplete - 자동 완성

Mr.Kang 2025. 2. 24. 08:35

1. Intro

Html의 셀렉트 박스의 리스트가 많아 질때 유용하게 사용 할 수 있다.

Jquery UI 라이브러리의 autocomplete 메서드를 이용하여 자동완성 기능을 간단하게 구현 할 수 있다.

 

2. 자동 완성 구현

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

</body>
</html>

 

Jquery UI Autocomplete

$(document).ready(function () {
    const data = [
        "서울특별시",
        "부산광역시",
        "대구광역시",
        "인천광역시",
        "광주광역시",
        "대전광역시",
        "울산광역시",
        "세종특별자치시",
        "경기도",
        "강원도",
        "충청북도",
        "충청남도",
        "전라북도",
        "전라남도",
        "경상북도",
        "경상남도",
        "제주특별자치도"
    ];

    $("#autocomplete").autocomplete({
        source: function (request, response) {
            const inputText = request.term.toLowerCase();
            const filteredItems = data.filter(item => item.toLowerCase().includes(inputText));
            response(filteredItems);
        },

        /**
        * 자동 완성 위치 조정
        * Default: { my: "left top", at: "left bottom", collision: "none" }
        * Getter
        * var position = $( ".selector" ).autocomplete( "option", "position" );
        * 
        * Setter
        * $( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
        * 
        */
        
        //position: { my: "right top+5" },

        // 자동 완성 하이라이팅
        open: function () {
            const inputText = $("#autocomplete").val().toLowerCase();
            // 검색 단어 하이라이팅
            $(".ui-autocomplete li").each(function () {
                let searchWord = $(this).text();
                const index = searchWord.toLowerCase().indexOf(inputText);

                if (index !== -1) {
                    // 검색 단어를 강조하기 위해 HTML을 사용하여 하이라이팅
                    const highlighting = `<strong>${searchWord.substr(index, inputText.length)}</strong>`;
                    searchWord = searchWord.substring(0, index) + highlighting + searchWord.substring(index + inputText.length);
                    // 하이라이팅 된 html을 적용
                    $(this).html(searchWord);
                }
            });
        },
    });
});

 

자동완성 라운박스 및 하이라이트 CSS

.autocomplete-input {
    display: block;
    width: 360px;
    margin: 10px auto 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

.ui-autocomplete {
    position: absolute;
    max-height: 200px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #ccc !important;
    border-radius: 8px;
    z-index: 1;
    list-style: none;
    overflow-y: auto;
}

.ui-autocomplete li {
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #000;
}

.ui-autocomplete li strong {
    color: #0077cc;
}

.ui-helper-hidden-accessible {
    display: none;
}

 

참조

  • Jquery Autocomplete 문서를 보고 option등의 설정 확인
 

Autocomplete Widget | jQuery UI API Documentation

Description: Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Any field that can receive input can be converted into an Autocomplete, namely, elements, elements, and

api.jqueryui.com

 

 

저작자표시 비영리 변경금지

'Project > FrontEnd' 카테고리의 다른 글

[JAVASCRIPT]form 서브밋 할 때 onclick으로 서브밋시 다중 서브밋 막기  (0) 2011.04.28
[JAVASCRIPT]달력소스  (0) 2008.08.06
[JAVASCRIPT]자바스크립트 정규 표현식  (0) 2008.07.26
[JAVASCRIPT]자바스크립트 쿠키처리 하기  (0) 2008.07.26
[JAVASCRIPT]substr 과 substring의 차이점  (0) 2008.07.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
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
글 보관함