[select2]_select2 옵션, 설정 ,심화

[select2]_select2 옵션, 설정 ,심화 _(select2 예제)

2022. 7. 5. 16:56ㆍ[Plug_in]_

728x90

심화

지난 설치에 이어서 좀더 많은 옵션을 부여해보도록 하겠습니다.

설치는 다음 포스트 참고

https://yn971106.tistory.com/138

[select2]_select2 설치, 기본 설정

사용 목적 기본적으로 html 에서 제공하는 select 의 경우 목록이 적으면 상관이 없지만, 만약 몇십~몇백개의 options 가 있다면, 화면도 다 가릴 뿐 더러, 실용성도 떨어질 겁니다. 일정 목롤을 보여

yn971106.tistory.com

목적

Ajax 와 같은 비동기 통신으로 불러온 데이터 리스트를 select options에 표현하고

사용자가 select2에서 선택한 값을 기준으로

변하는 formDate 생성하기

흐름

select2 의 options 목록을 ajax와 같은 비동기 통신으로 값을 받아온뒤,

select2 옵션을 등록

사용자가 select2 옵션을 선택시 해당 옵션에 바인드 된 값들이 input type="hidden" 에 맞춰 저장

<html>

client 가 선택한 옵션에 맞는 값을 formDate 로 전달하기 위해

input type="hidden" 을 생성합니다.

<select id="select2" name="select2" class="form-control">
</select>
<input type="hidden" id="productNM" name="product"/>
<input type="hidden" id="productID" name="productID"/> 
<input type="hidden" id="productPW" name="productPW"/> 
<input type="hidden" id="productPrice" name="productPrice"/>

<script>

$('#select2').select2(setOptions()).on({
    'select2:open' : function (e) { //select2 open시 작동 이벤트
        $('input.select2-search__field').prop('placeholder', '상품을 검색하세요');
    },
    'change.select2' : function () { //select 의 옵션값이 바뀔 때 작동 이벤트
        removeForm(); // input type=hidden 의 값을 지우는 로직을 설정 해당 포스트에서는 생략
    }
});

select2 선언 부분

select2() 에 옵션을 set 하는 함수 호출

JQuery 의 on을 사용하여 select 가 열리고, 값이 변하는 기점 이벤트 걸기

setOptions()

function SetOption() {

    let options = {
            templateSelection: function (data, container) {
                $('#productNM').val(data.productNM);
                $('#productID').val(data.productID);
                $('#productPW').val(data.productPW);
                $('#productPrice').val(data.productPrice);

                return data.text;
            },
            placeholder: "상품을 검색하세요.",
            allowClear: false,
            width: '320'
        };

        function getDataSet(item) {
            return {
                id: `\${item.productid}`,
                text: `\${item.productname}`,
                productNM: item.productname,
                productID: item.productid,
                productPW: item.productpassword,
                productPrice: item.productprice
            }
        }

        $.extend(options, {
            minimumInputLength: 3,
            ajax: {
                url: '/product/getProduct.do',
                dataType: 'json',
                type: 'POST',
                quietMillis: 250,
                delay: 250,
                data: {
                    userNm: "yn971106"
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return GetDataSet(item)
                        })
                    };
                }
            }
        });

        return options;
}

설명하기 앞서 메소드와, 옵션의 공식문서는 다음과 같습니다.

https://select2.org/configuration/options-api

Options | Select2 - The jQuery replacement for select boxes

Options This is a list of all the Select2 configuration options. Option Type Default Description ajax object null Provides support for ajax data sources. allowClear boolean false Provides support for clearable selections. amdLanguageBase string ./i18n/ See

select2.org

1. 기본 옵션 (Default options 설정)

let options = {
            templateSelection: function (data, container) {
                $('#productNM').val(data.productNM);
                $('#productID').val(data.productID);
                $('#productPW').val(data.productPW);
                $('#productPrice').val(data.productPrice);

                return data.text;
            },
            placeholder: "상품을 검색하세요.",
            allowClear: false,
            width: '320'
        };

templateSelection 메소드

해당 메소드는 다음과 같습니다.
options이 선택되면, data( select2 에 저장된 data들) 로 커스터마이즈 할 수 있습니다.
여기서는 input type="hidden" 에 각각 맞는 데이터를 바인딩 합니다.
그리고 마지막에는 select 한 값을 표출할 return 값이 필요합니다.

placeholder 옵션

select2 를 선택하기 전 보여줄 default 메시지를 설정합니다.

allowClear 옵션

select2 에서 options 을 선택시 해당 options을 지울수 있는 x 표시가 뜨는지에 대한 여부입니다.
false 로 선택이 무조건 되도록 설정할 수 있습니다.

width 옵션

너비옵션

2. ajax

$.extend(options, {
            minimumInputLength: 3,
            ajax: {
                url: '/product/getProduct.do',
                dataType: 'json',
                type: 'POST',
                quietMillis: 250,
                delay: 250,
                data: {
                    userNm: "yn971106"
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return getDataSet(item)
                        })
                    };
                }
            }
        });

JQuery 의 extend를 사용해서 options의 값을 확장시킵니다.

minimumInputLength 옵션

검색을 위한 최소의 입력값을 받습니다.
3으로 지정했으니 3개 이상의 단어를 써야 검색이 시작됩니다.

ajax 옵션

기본 ajax 와 똑같습니다.
url, type data등을 통해 데이터를 받아옵니다.
processResults 를 통해 성공한 데이터를 GetDataSet 함수로 전달합니다.

3.getDateSet()

function getDataSet(item) {
            return {
                id: `\${item.productid}`,
                text: `\${item.productname}`,
                productNM: item.productname,
                productID: item.productid,
                productPW: item.productpassword,
                productPrice: item.productprice
            }
        }

ajax 로 받아온 값을 options 객체에 그대로 뿌려주는 역활을 합니다.

여기서 중요한점은

id 와 text 의 값입니다.
id 는 options 엘리먼트의 value 값이 되고
text는 options 엘리먼트의 text( 표시되는 값) 이 됩니다.

이 값들은 추후 templateSelection 메소드에 의해 input 태그에 값이 지정이 됩니다.

남은 작업

input formDate를 사용할 controller 에 전달하는 과정과,

select2 의 옵션값이 바뀌면 input 엘리먼트의 값을 초기화해주는 기능만 구현하면

ajax로 받아온 데이터 리스트를 select2로 구현하고, 그값을 선택시 바인드된 데이터들이 controller에 값 전달하는 과정이 마무리 됩니다.

간단한 작업이라 여기서는 다루지 않습니다.

이렇게 select2를 여러가지 옵션과 메소드를 사용해서 구현해 보았습니다.

감사합니다.