{ 태그에 닫는 태그가 없습니다. error :295 고객지원센터 입력폼에 자동완성 기능 추가하는 방법

매뉴얼

공통/일반 입력폼에 자동완성 기능 추가하는 방법

 

쇼핑몰 상품 검색 및  통합 게시판 검색폼에서 사용자가 단어를 입력하면 관련 검색어가 같이 표시되는 기능 입니다.

표시되는 기준은  [마케팅지원 > 마케팅지원 > 인기검색어 관리]에서 등록된 단어를 먼저 출력하며, 다음으로 실제 게시글 및 상품명등이 출력 됩니다.

[샘플소스] (그대로 복사 해서 사용가능합니다.)

<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 입력시 모든 맞춤게시판을 가져오며, 아닌경우 해당 맞춤게시판만 가져 옵니다.

 

 

 

 

 

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top