2022. 9. 30. 14:09ㆍ[오픈소스_라이브러리]/[JQuery_UI]_AutoComplete
환경
Tool: Intellij
Framework : Spring
Language : ES6,JQuery
DB : ORACLE
목적
input 태그에 자동완성 기능 구현
데이터는 ORACLE DB 의 값 조회
AutoComplete 에 커스텀 Class 적용방법
사용 라이브러리
UI-JQuery AutoComplete
https://jqueryui.com/autocomplete/#content
Autocomplete | jQuery UI
Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr
jqueryui.com
적용 예시
코드
HTML
<body>
<div id="content" class="menu2_tab">
<div id="contentwrap">
<input id="autoCompleteInput"/>
<%--<form id="frm">
<input type="text" placeholder="제목" id="subject" name="subject">
<input type="text" placeholder="내용" id="writecontent" name="content">
<button type="button" onclick="fn_boardRegi();">등록</button>
</form>--%>
</div>
</div>
</body>Script
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src='/js/jquery-3.6.0.min.js?ver=1'></script>
<script src='/js/jquery-ui.js?ver=1'></script>
<script type="text/javascript">
let initailize = function(){
let container = document.querySelector(".menu2_tab");
let auto_input = container.querySelector("#autoCompleteInput");
$("#autoCompleteInput",container).autocomplete({
source: function(request,response){
$.ajax({
url: 'member/memberAutoComplete.do',
type : "POST",
contentType : "application/json",
data : JSON.stringify({VALUE : request.term}),
success : function (responseData){
response(
$.map(responseData , function(item){
return{
value : item.USER_NAME,
label : item.USER_NAME
}
})
)
},
error: function(){
}
});
},
create : function(event , ui){
$(this).data('ui-autocomplete')._renderItem = function(ul,item){
/*ul.addClass('auto-search__list');*/
let label = item.label.replace($("#autoCompleteInput",container).val(),'');
let element = $('<div><mark>'+$("#autoCompleteInput",container).val()+'</mark>'+ label +'</div>');
return $('<li></li>').append(element).appendTo(ul);
}
},
focus: function(event,ui){
return false;
},
minLength: 1,
autoFocus : true,
delay : 300,
classes : {
'ui-autocomplete': 'highlight'
},
/*appendTo : 해당 옵션 body에 만들지 container 와 같은 탭 영역에 생성해서 생명주기 조절 가능*/
select: function(evt,ui){
// 선택시 이벤트 부여 가능
}
})
}
$(document).ready( function () {
// start
initailize();
});
</script>
Controller
//자동완성 기능
@RequestMapping("member/memberAutoComplete.do")
@ResponseBody
public List memberAutoComplete(@RequestBody Map<String,String> mapData) throws Exception{
System.out.println("autoComplete 실행");
System.out.println(mapData);
System.out.println(mapData.get("VALUE"));
ModelAndView mav = new ModelAndView();
List resultList = memberservice.memberAutoComplete(mapData);
mav.addObject("output",resultList);
return resultList;
}Service & Impl
public List memberAutoComplete(Map<String,String> mapData) throws SQLException, Exception;@Override
public List memberAutoComplete(Map<String,String> mapData) throws Exception {
return membermapper.memberAutoComplete(mapData);
}
Mapper.java
public List memberAutoComplete(Map<String,String> mapData);Mapper.xml
<select id="memberAutoComplete" resultType="java.util.HashMap">
select
*
from book_member
where USER_NAME LIKE '%'||#{VALUE}||'%'
</select>생성 부분 코드 설명
source
source: function(request,response){
$.ajax({
url: 'member/memberAutoComplete.do',
type : "POST",
contentType : "application/json",
data : JSON.stringify({VALUE : request.term}),
success : function (responseData){
response(
$.map(responseData , function(item){
return{
value : item.USER_NAME,
label : item.USER_NAME
}
})
)
},
error: function(){
}
});
},해당 select 은 api 를 호출하여 데이터 베이스의 저장된 값을 가져옵니다.
static 한 array 를 지정할 수도 있습니다.
value : 선택된 값 -> input 에 저장될 값
label : select 박스에 나타낼 보여질 값
create
create : function(event , ui){
$(this).data('ui-autocomplete')._renderItem = function(ul,item){
/*ul.addClass('auto-search__list');*/
let label = item.label.replace($("#autoCompleteInput",container).val(),'');
let element = $('<div><mark>'+$("#autoCompleteInput",container).val()+'</mark>'+ label +'</div>');
return $('<li></li>').append(element).appendTo(ul);
}
},해당 부분은 ul ,li에 원하는 클래스를 입힐 때 _renderItem 을 이용하여 생성하면 됩니다.
저는 추가적으로 사용자가 입력된 값을 mark 를 이용하여 보여주는 li에 표시하도록 구현하였습니다.
그 외
focus: function(event,ui){
return false;
},
minLength: 1,
autoFocus : true,
delay : 300,
classes : {
'ui-autocomplete': 'highlight'
},
/*appendTo : 해당 옵션 body에 만들지 container 와 같은 탭 영역에 생성해서 생명주기 조절 가능*/
select: function(evt,ui){
// 선택시 이벤트 부여 가능
}focus : focus 함수를 사용함으로써 키보드 방향키로 선택이 가능하게 합니다.
minLength : input 에 입력된 데이터를 인식하는 범위입니다. 너무 짧게 할 경우 데이터베이스 참조가 잦아지니 기획에 맞춰서 구현하면 됩니다.
delay : minLength 와 마찬가지로 최소 입력범위가 입력되고 검색을 할 사이의 시간입니다. 너무 짧게 둘 경우 데이터베이스 참조가 잦아집니다.
classes : 해당 옵션으로 li의 마우스 오버, 방향키 이동으로 인한 하이라이트를 부여할 수 있습니다.
select : 추후 클릭후 이벤트를 발생 시킬 일이 있을 경우 select 함수 안에 작성하면 됩니다.
감사합니다.