program

[jQuery] plugin(제이쿼리 플러그인)으로 검색 자동완성(autocomplete) 구현하기

littlecarbb 2017. 2. 9. 17:12

자동완성을 구현할 일이 생겨서 찾아보던 차에 좋은 plugin을 발견했네요.

jQuery Autocomplete 플러그인인데요.

http://dndrb0.blog.me/120205427972

http://zzznara2.tistory.com/299

저는 저 두분이 하신거 공유만 합니다.

Autocomplete.zip


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>자동완성</title>
<script type="text/javascript" src="jquery/lib/jquery.js"></script>
<script type='text/javascript' src='jquery/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='jquery/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='jquery/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery.autocomplete.css" />
</head>
<body>

	<script>
	var availableTags = [
							'가나',
							'가나쵸콜렛',
							'갈갈이 삼형제',
							'북마크',
							'북까페',
							'엄마',
							'아빠',
							'북소리',
							'여러분',
							'소문',
							'소문난 식당',
							'나나나',
							'쇼',
							'쇼팽',
							'모나미',
							'한강',
							'강강수월래',
							'강촌',
							'제주도',
							'삼총사',
							'먹보',
							'먹소리',
							'수박',
							'수박 겉핥기'
						];
	</script>

	

	  
	  
	


	<script>
	$(document).ready(function() {
	    $("#searchbox").autocomplete(availableTags,{ 
	        matchContains: true,
	        selectFirst: false
	    });
	});
	</script>

</body>
</html>


글자 순서대로 검색되게 하려면 이렇게 하시면 되구요.

matchContains: true


입력한 글자가 들어간 모든 검색어를 보여주려면 아래처럼 하시면 됩니다.

matchContains: false

저작자표시