jQuery UI 텍스트필드 자동완성 autocomplete

개요

jQuery UI 텍스트필드 자동완성 autocomplete

입력된 값들의 리스트를 사전에 보여주어 사용자가 좀 더 빨리 원하는 값을 찾을 수 있도록 함

속성

옵션	appendTo, autoFocus, delay, disabled, minLength, position, source
메소드	close, destroy, disable, enable, instance, option, search, widget
이벤트	change, close, create, focus, open, response, search, select

예시

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
	var languages = [
		"ActionScript", "AppleScript", "Asp","BASIC", "C",
		"C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
		"Fortran", "Groovy", "Haskell", "Java", "JavaScript",
		"Lisp", "Perl", "PHP", "Python", "Ruby",
		"Scala", "Scheme"
	];

	$( "#my-language" ).autocomplete({
		source: languages
	});
});
</script>

프로그래밍 언어: <input id='my-language' type='text'>

→ b를 입력하면 b가 포함된 모든 항목들(BASIC, COBOL, Ruby)이 출력됨

→ ja를 입력하면 ja가 포함된 모든 항목들(Java, JavaScript)이 출력됨

같이 보기

참고 자료

https://jqueryui.com/autocomplete/