검색어 같은경우 자주 자동완성기능을 사용합니다. 타이핑하고있는 글을 지정된 문자들과 비교해서
가장 가까운 글을 자동으로 보여주고, 선택하면 바로 그 글자로 바꿔주는 기능입니다.
이 기능은 예제구현은 간단하니 설치방법을 보겠습니다.
jQuery홈페이지의 Plugin에서 jQuery Autocomplete Plugin 다운받으셔서 jquery.autocomplete.js파일과
jquery.autocomplete.css파일을 준비 합시다. 검색은 Autocomplete로 했습니다.
저의경우 귀찮기도 하고, 만일의 사태도 있고, 데모html도 확인하고 싶어서 보통 통채로 복사해서 사용합니다.
이제 htm 문서를 만들어서 밑에 코드처럼 쓰시면 됩니다.
초록색 코드는 사람마다 다르니 다시 링크걸어서 사용해 주시고요.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="jquery-autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var data = "ASP JSP PHP Ajax Silverlight JAVA CSS".split(' ');
$('#search').autocomplete(data);
});
</script>
</head>
<body>
상품검색 : <input type="text" id="search" />
</body>
</html>
만약 검색어를 DB로 걸어주시고 싶으시면, DB에서 검색어를 가져와 문자열로 만들어서 사용하시면 됩니다.
'jQuery' 카테고리의 다른 글
| jQuery 금액 콤마 플러그인 (0) | 2013.02.18 |
|---|---|
| jquery 숫자만 (0) | 2013.02.18 |
| jquery radio checked, select option selected (0) | 2013.02.18 |
| jQuery & iframe (0) | 2013.02.18 |
| jquery 사이트 - 1 (0) | 2013.02.18 |