애니빌드.LAB
매뉴얼
공통/일반 입력폼에 자동완성 기능 추가하는 방법
- Anybuild
- 2015-09-04 15:46:00
- hit5551
- http://wdev.anybuild.co.kr/bbs/faq/4764
쇼핑몰 상품 검색 및 통합 게시판 검색폼에서 사용자가 단어를 입력하면 관련 검색어가 같이 표시되는 기능 입니다.
표시되는 기준은 [마케팅지원 > 마케팅지원 > 인기검색어 관리]에서 등록된 단어를 먼저 출력하며, 다음으로 실제 게시글 및 상품명등이 출력 됩니다.
[샘플소스] (그대로 복사 해서 사용가능합니다.)
<style>
fieldset { position: relative; text-align: center; border: none; margin: 50px auto; width: 400px; padding: 0; }
.search { border: 3px solid #2db400; line-height: 30px; margin: 0; height: 30px; padding: 0; width: 100%; text-indent: 10px; }
.search.type02 { border-color: #f26522; }
.search.type03 { border-color: #00bff3; }
ul { display: none; position: absolute; top: 36px; left:0; right: 0; border: 1px solid #ccc; border-top: none; list-style: none; z-index: 9; background: #fff; padding: 10px; margin: 0; }
ul li { font-size: 9pt; text-decoration: none; text-align: left; line-height: 1.8em; }
ul li a { text-decoration: none; color: #333; }
ul li a strong { color: #ff7200; }
</style>
<fieldset>
<input type="text" name="stx" id="stx1" class="search type01" value="" />
</fieldset><load target="/img_up/_addon/auto_complete/jquery.searchbox.min.js">
<script>
$(document).ready(function() {
$('#stx1').searchBox({url : '/etc/auto_complete_exec.php?bbs_code=all'});
});
</script>
적용예시 : http://lab.anybuild.co.kr/page/auto
위 소스에서 /etc/auto_complete_exec.php 은 실제 검색어를 가져오는 부분 입니다.
이때 뒤쪽에 아래와 같이 변수를 전달하면 해당 되는 검색어만 가져 올수 있습니다.
| 사용가능한 변수 및 값 | 가져오는 검색어 |
| shopping_goods_yn=1 | 쇼핑몰의 모든 상품명 |
| bbs_code=all |
게시판 제목 및 내용 all 입력시 모든 게시판을 가져오며, 아닌경우 해당 게시판만 가져 옵니다. |
| myboard_code=all |
맞춤 게시판 제목 및 내용 all 입력시 모든 맞춤게시판을 가져오며, 아닌경우 해당 맞춤게시판만 가져 옵니다. |
열기 닫기