[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> |
# 출력결과
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
| [jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0) | 2020.03.02 |
|---|---|
| [jQuery] JCROP을 이용한 이미지 자르기 - Sample (5) | 2020.02.11 |
| [jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0) | 2019.06.18 |
| [jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0) | 2019.06.04 |
| [jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7) | 2019.01.31 |
