[jquery] select2 검색 기능 focus 안되는 문제 해결 팁

개요

jsp 페이지 그리면서 다양한 화면 라이브러리를 활용할 때가 있는데 select box를 그릴때 저는 select2 라이브러리를 주로 사용합니다.

select2 라이브러리에 대한 부분은 공식 페이지를 통해서 확인하실 수 있습니다.

https://select2.org/

Getting Started | Select2 - The jQuery replacement for select boxes

 

 

다른 기능보다 검색기능의 편의성이 너무 좋아서 따로 구현하지 않고 바로 사용이 가능해 많이 활용하는 편인데 modal 위에 select2 박스를 그리면 포커싱이 되지 않는 문제를 발견했습니다. modal 레이어 위에 그리지 않은 경우에는 해당이 안됩니다. 이 문제를 해결하는 과정을 서술해보고자 합니다.

 

 

본문

다음과 같은 modal 레이어를 하나 작성하고 그 안에 select 박스를 그려주었습니다. select 박스가 가지는 옵션은 년도 데이타를 가집니다. 데이타가 많아질 경우 검색 기능이 필요하므로 select2 를 적용해줍니다. 

 

select box 의 id 는 modalSelect2, modal 레이어의 id는 modalSample로 명시했습니다.

 

<div class="modal fade" id="modalSample">
		<div class="modal-dialog modal-dialog-centered modal-lg  modal-dialog-scrollable">
			<div class="modal-content border-0">
				<div class="modal-header bg-soft-info p-3">
					<h5 class="modal-title" id="myLargeModalLabel">모달 샘플</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
				</div>
				<div class="modal-body">
					<div class="row g-3">
						<div class="col-lg-6">
							<div>
								<label for="assInfoNum" class="form-label">아이템을 선택하시오</label> <select class="form-select" id="modalSelect2">
									<option value="2020">2020년</option>
									<option value="2021">2021년</option>
									<option value="2022">2022년</option>
									<option value="2023"  selected>2023년</option>
									<option value="2024">2024년</option>
									<option value="2025">2025년</option>
									<option value="2026">2026년</option>
									<option value="2027">2027년</option>									
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="hstack gap-2 justify-content-end">
						<button type="button" class="btn btn-success" id="save-btn" onclick="fnObj.saveInvestSummaryInfo();">저장</button>
						<button type="button" class="btn btn-light" data-bs-dismiss="modal">닫기</button>
					</div>
				</div>
			</div>
		</div>
	</div>

 

 

select2 적용 전

select2 를 적용하기 전의 모습입니다. 아이템 리스트만 출력되고 검색을 위한 기능은 제공되지 않습니다.

 

다음의 코드를 이용해서 select2 를 적용시켜줍니다.

$("#modalSelect2").select2({		    
    placeholder : '아이템을 선택하세요',
    closeOnSelect : true,
    dropdownAutoWidth : true,
});

 

 

 

select2 적용 후

select 박스에 select2 를 적용한 모습입니다. select 박스의 디자인이 select2에서 제공해주는 css로 변경되었으며 검색을 위한 텍스트 박스도 노출되고 있습니다. 근데 포커스가 먹히지 않습니다. focus 가 잡히지 않는 관계로 타이핑이 되지 않아서 검색기능은 현재 사용할 수 없습니다.

 

 

해결책

 

select2 박스의 부모를 지정해주어야 정상적으로 포커스가 먹힙니다. 다음 코드 한줄을 select2 생성부에 파라미터로 추가해줍니다.

 

dropdownParent: $("#modalSample")

 

modalSample 는 모달 레이어의 접근자 id 입니다.

 

$("#modalSelect2").select2({		
    dropdownParent: $("#modalSample"),
    placeholder : '아이템을 선택하세요',
    closeOnSelect : true,
    dropdownAutoWidth : true,
});

 

 

 

수정된 화면

 

다음과 같이 2023을 입력하니 2023년에 해당하는 아이템만 검색되어 서 잘 나옵니다. focus 가 안먹히는 문제를 해결하면서 검색기능을 활용할 수 있습니다.

 

 

 

 

 

마무리

select2가 10개 이하의 아이템에서는 사실 검색 기능이 필요없지만 100개, 1000개가 넘어가면 스크롤 하면서 아이템 찾기가 사실 어렵습니다. 그래서 편의 기능으로 검색기능을 반드시 제공해줘야 합니다. 이렇게 select2 가 제공해주는 기능으로 쉽게 화면 구성이 가능해지니 참고하시기 바랍니다.