JQUERY 자동완성(autocomplete)

 

입력필드에 타이핑시 자동으로 데이터에 일치하는 값들을 가져와서 완성시킬 수 있게 해주는 기능.

 

사용 코드

$("#title").autocomplete({
	      source: function(request, response) {
			$.ajax({
				url: "/apiUrl"),
				success: function(data) {
               		     // 서버에서 json 데이터 response
					response($.map(data.items, function (item) {	
						return {
			                label: "["+item.id+"] " + item.title + " ("+item.type+")",
			                baseCodeId: item.id,
			                type: item.type
			            };
			        }));		
				}
			});
	      },
	      minLength: 2,	// autocomplete로 보여주기 위한 최소 글자 수
	      select: function( event, ui ) {
	    	$("#baseCodeId").val(ui.item.baseCodeId);
	    	$("#type").val(ui.item.type);
	      }
});