[jQuery] AJAX를 사용한 DB연동 자동완성(Autocomplete)(feat.스프링)

JQUERY UI 에는 input에 입력 시 자동완성을 해주는 autocomplete가 있다.

이 기능과 ajax를 이용해 DB에 있는 정보로 자동완성을 만들어보자!

​

1. JQUERY랑 JQUERY UI 라이브러리 추가

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

2. HTML

<h2>자동완성 테스트</h2>
<input type="text" id="autoComplete">

 

3. SCRIPT

$('#autoComplete').autocomplete({
	source : function(request, response) { //source: 입력시 보일 목록
	     $.ajax({
	           url : "/ajax/autocomplete.do"   
	         , type : "POST"
	         , dataType: "JSON"
	         , data : {value: request.term}	// 검색 키워드
	         , success : function(data){ 	// 성공
	             response(
	                 $.map(data.resultList, function(item) {
	                     return {
	                    	     label : item.SEARCH_WORD    	// 목록에 표시되는 값
	                           , value : item.SEARCH_WORD 		// 선택 시 input창에 표시되는 값
	                           , idx : item.SEQ // index
	                     };
	                 })
	             );    //response
	         }
	         ,error : function(){ //실패
	             alert("오류가 발생했습니다.");
	         }
	     });
	}
	,focus : function(event, ui) { // 방향키로 자동완성단어 선택 가능하게 만들어줌	
			return false;
	}
	,minLength: 1// 최소 글자수
	,autoFocus : true // true == 첫 번째 항목에 자동으로 초점이 맞춰짐
	,delay: 100	//autocomplete 딜레이 시간(ms)
	,select : function(evt, ui) { 
      	// 아이템 선택시 실행 ui.item 이 선택된 항목을 나타내는 객체, lavel/value/idx를 가짐
			console.log(ui.item.label);
			console.log(ui.item.idx);
	 }
});

 

4. CONTROLLER.JAVA

@Controller
public class AutoComController {

	@Autowired
	AutoComService service;
	
	@RequestMapping(value = "/ajax/autocomplete.do")
	public @ResponseBody Map<String, Object> autocomplete
    						(@RequestParam Map<String, Object> paramMap) throws Exception{

		List<Map<String, Object>> resultList = service.autocomplete(paramMap);
		paramMap.put("resultList", resultList);

		return paramMap;
	}
}

 

5. SERVICE.JAVA

public interface AutoComService {
	List<Map<String, Object>>autocomplete(Map<String, Object> paramMap) throws Exception;
}

 

6. SERVICEIMPL.JAVA

@Service
public class AutoComServiceImpl implements AutoComService{

	@Autowired
	AutoComMapper autoComMapper;
	
	@Override
	public List<Map<String, Object>>autocomplete(Map<String, Object> paramMap) throws Exception{
		return autoComMapper.autocomplete(paramMap);
	}
}

 

7. MAPPER.JAVA

@Mapper
public interface AutoComMapper {
	List<Map<String, Object>>autocomplete(Map<String, Object> paramMap) throws Exception;
}

 

8. MAPPER.XML

<select id="autocomplete" parameterType="map" resultType="map">
	SELECT
		 SEQ 
		,SEARCH_WORD
	FROM TEST
	WHERE SEARCH_WORD LIKE  '%'|| #{value} || '%'
</select>

 

- DB (ORACLE) : 테스트 데이터

 

* 테스트 실행화면