[JavaScript]input에 자동완성 기능 (autocomplete)

[2021.05.07]

jquery autocomplete를 가져와서 사용 하였습니다.

 

샘플 소스는 아래의 링크를 통해서 보실 수 있습니다.

jqueryui.com/autocomplete/

Autocomplete | jQuery UI

※필수적으로 필요한 CSS와 Js가 있습니다.

Jquery 기반으로 되어있기 떄문에 Jquery가 필요하고 아래 CSS와 js를 필수적으로 넣어야 됩니다.

<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>

가능하면 소스파일을 따로 다운 받아서 사용하시기를 추천 드립니다. 

 

 

아래는 샘플입니다. 

var vJsonData = [
		{ label: "Test", value: "Test" }, { label: "Test1", value: "Test1" },{ label: "Test2", value: "Test2" },{ label: "Test3", value: "Test3" }
	];
$("#ID").autocomplete({ //input ID를 넣어주세요.
	source: vJsonData,
	open: function (event, ui) {
		$(this).autocomplete("widget").css({
			"width": 100 //width 조절
		});
	},
	minLength: 0,
	autoFocus: true,
	focus: function (event, ui) {
		return false; //클릭 시 이상한 것이 클릭 되면 추가해주세요. 
	},
	select: function (event, ui) { //autocomplete에서 선택 시
		//ui.item.label vJsonData의 label 데이터
		//ui.item.value vJsonData의 value 데이터
		return false;
	}
}).bind('focus', function () { //포커스가 되었을 때. 자동완성 데이터 전부 보여주고 싶을 때 이 부분을 넣어주세요. 		
	if (!$(this).val().trim())
		$(this).keydown();
});