[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

Posted at 2020. 7. 24. 07:54 | Posted in JavaScript & jQuery/jQuery





■ 텍스트 입력박스 다중 선택 기능 만들기






jQuery UI 중에는 다중 선택을 위한 Autocomplete - Multiple values 기능이 존재한다.


여러개의 항목중 원하는 몇가지를 선택하는것에 적합한데.


샘플코드( https://jqueryui.com/autocomplete/#multiple ) 를 보면 쉽게 알 수 있을 것이다.


그렇지만 위 샘플코드에서는 선택 입력한 값의 내용이 다시 선택이 가능하다는 단점이 존재하여.


한번 선택한 항목은 선택에서 배제될 수 있게 내용을 조금 수정해 보았다.




# 소스코드

<html lang="ko">

<head>

<meta charset="utf-8">

<title>jQuery UI Autocomplete - 다중 선택</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    jQuery(document).ready(function() {


        jQuery( "#tags" ).on( "keydown" , function( event ) {


            // 항목을 선택할때 탭으로 이동하지 못하게 한다.

            if( event.keyCode === jQuery.ui.keyCode.TAB && jQuery(this).autocomplete("instance").menu.active ) {

                event.preventDefault();

            }


        }).autocomplete({

              minLength : 0

            , source : function( request, response ) {


                // Autocomplete 자동완성 문자 리스트 - 초기값 ( 변경되지 않는 절대값 )

                const availableTags = [

                      "파이어폭스", "크롬", "오페라", "웨일", "사파리", "익스플로러", "엣지"

                    , "비발디", "브레이브", "돌핀", "토치", "미도리", "아반트", "맥스톤"

                ];


                // Autocomplete 자동완성 문자 리스트 - 변경값 ( 검색이 이루어지는 실제 배열의 삭제 및 재생산이 이루어짐 )

                let unfoldTags = availableTags;


                // 콤마( , )로 구분되는 문자열을 배열로 만든다.

                let arrTrem = request.term.split(",");


                // 문자 리스트에서 이미 선택된 문자열은 삭제한다.

                arrTrem.forEach(function(trem) {


                    let search = unfoldTags.indexOf( trem.trim() );


                    if(search != -1) {

                        unfoldTags.splice(search, 1);

                    }

                });


                // 자동 완성을 다시 실행하지만, 마지막 용어를 추출한다.

                response(jQuery.ui.autocomplete.filter(unfoldTags, extractLast(request.term)));

                unfoldTags = null;

            }

            , focus : function() {

                return false;

            }

            , select : function(event, ui) {


                let terms = split(this.value);


                // 현재 입력값을 제거한다.

                terms.pop();


                // 선택된 아이템을 추가한다.

                terms.push(ui.item.value);


                // 끝에 콤마와 공백을 추가한다.

                terms.push("");

                this.value = terms.join(", ");


                return false;

            }

        });


        // 공백문자에 대응

        function split(val) {

            return val.split( /,\s*/ );

        }


        // 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환

        function extractLast(term) {

            return split(term).pop();

        }

    });

</script>

</head>

<body>

<div class="ui-widget">

    <label for="tags">프로그래밍 언어 : </label>

    <input id="tags" size="80" value="">

</div>

</body>

</html>






# 출력결과











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기