jQueryUI를 이용하여 자동완성기능을 제작해보자 - (1)

네이버,다음,구글등에서 검색키워드시 사용하는 기능인대 네이버처럼은 아니여도 

심플하게 한번 만들어보자

처음에 button ui를 만들었을때 js와 css폴더만을 가지고 구현해보자

해당페이지를 먼저 보시는 분은 다음 링크에서 jqueryUI include하고난후 진행하자

2014/06/19 - [자바스크립트이야기/jQuery UI 소개] - jQueryUI 시작하기 - 다운로드부터 버튼출력까지

html 파일명은 autocomplete.html이라고 했음

html코드

<input id="autocompleteText" type="text" />

스크립트코드

$(function(){
    		$( "#autocompleteText" ).autocomplete({
    			source:  [
    		    			"개발로짜",
    		    			"roqkffhwk",
    		    			"tistory",
    		    			"gksql",
    		    			"안녕하세요"
    		    		 ]
    		});
})

이번장은 단순하게 스크립트내에 배열형식으로 하여 출력해 보았으나 다음장에는 ajax를 이용하여

비동기방식으로 자동완성을 구현해보도록 하겠다

실행결과