JQuery 이용한 검색 자동완성

티스토리 뷰

LANGUAGE/Jquery

JQuery 이용한 검색 자동완성

랑스티비 2019. 3. 18. 13:44

JQuery 이용한 검색 자동완성

위의 압축파일을 풀면 아래와 같이 보인다.

test.html의 모습은 아래와 같다.

사용하는 언어(.net, java, php 등)에 따라 DB로 데이터를 가져와

아래 availableTags 에 원하는 검색어를 넣으면 나타나는 방식이다.

<!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>
<form name="form1" method="post" action="result.php">
<input type="text" id="searchbox">
<input type="submit" id="sumit" value="검색">
</form>
<script>
$(document).ready(function() {
$("#searchbox").autocomplete(availableTags,{
matchContains: true,
selectFirst: false
});
});
</script>
</body>
</html>

실제 구현 모습

2005년인가 이부분 완전 쌩쇼(DB에서 like 검색으로 ajax로..ㅋㅋ)

퍼포먼스도 안나오고, 글쓰는 속도랑 맞지 않아 고생했는데

위의 부분으로 하니 엄청 편하게 했다.

저작자표시

'LANGUAGE > Jquery' 카테고리의 다른 글

JQUERY Easy UI 유용한 사이트 (0)	2019.03.18

'LANGUAGE/Jquery' 카테고리의 다른글

JQUERY Easy UI 유용한 사이트 2019.03.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

티스토리 뷰

JQuery 이용한 검색 자동완성

'LANGUAGE > Jquery' 카테고리의 다른 글

티스토리툴바