이전 목록 다음
채택완료

search 키워드 롤링 후 기본 키워드로 검색 - 스크립트 방법 궁금합니다.

희야아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전 123
안녕하세요.
모든분들 연휴는 잘 보내고 계시는지요?^

상단 검색창에 기본적인 검색어를 등록하고 직접 키워드를 넣지 않고 보여지는 검색어를 누르면 검색이 되게 하려고 합니다.
ai가 아래처럼 하면 될거라고 해서 시도를 해 보았는데 키워드와 롤링은 되는데 검색 버튼을 눌러도 검색이 되지 않고
"이 입력란을 작성하세요" 라는 멘트가 나옵니다. 
제가 어디를 잘못 입력하고 있는 걸까요?? 

<div class="input-group">
       <input type="text" name="stx" id="sch_stx" class="multikeyword" required placeholder="검색어를 입력해주세요.">
           <span class="input-group-btn">
                <button type="submit" class="btn btn-sm"><i class="fa fa-search fa-lg"></i></button>
            </span>
        </div>
===============================================================================

<script>
            $(document).ready(function() {
                var keywords = ["하늘정원", "검색팁", "다중검색", "테마추천"];
                var idx = 0;
                var $input = $('#sch_stx'); // 검색창 input의 ID

        if($input.length) {
            setInterval(function() {
                $input.attr('placeholder', keywords[idx]);
                idx = (idx + 1) % keywords.length;
            }, 2000); // 2초(2000ms)마다 변경
        }

            $('form[name="fsearchbox"]').submit(function() {
            if(!$('#sch_stx').val()) {
                // 검색창이 비어있으면 현재 플레이스홀더 값을 검색어로 대체
                $('#sch_stx').val($('#sch_stx').attr('placeholder'));
          }
       });
     });
   </script>

늦었지만 새해 복 많이 받으세요~~
그누5
|

답변 1개 / 댓글 12개

채택된 답변
+20 포인트
SSmartWeb
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
Copy 
$(document).ready(function() {
    var keywords = ["하늘정원", "검색팁", "다중검색", "테마추천"];
    var idx = 0;
    var $input = $('#sch_stx');
    var rollingInterval;

    function startRolling() {
        rollingInterval = setInterval(function() {
            $input.attr('placeholder', keywords[idx]);
            idx = (idx + 1) % keywords.length;
        }, 2000);
    }

    function stopRolling() {
        clearInterval(rollingInterval);
    }

    // 초기 롤링 시작
    startRolling();

    // 입력창 focus 시 롤링 중단
    $input.on('focus mouseenter', stopRolling);
    // 입력창 blur 시 롤링 재개
    $input.on('blur mouseleave', startRolling);

    // 버튼 hover 시 롤링 중단
    $('#sch_submit').on('mouseenter', stopRolling);
    // 버튼에서 마우스 떼면 롤링 재개
    $('#sch_submit').on('mouseleave', startRolling);

    // submit 처리: 값이 없으면 placeholder를 value로 넣음
    $('form[name="fsearchbox"]').on('submit', function() {
        if(!$input.val()) {
            $input.val($input.attr('placeholder'));
        }
    });
});
이렇게 한번 변경해 보세요

답변에 대한 댓글 12개

희야아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
안녕하세요.. 질문의 스크립트와 동일 반응입니다...^^
관심 주셔서 고맙습니다. 아미나를 사용하고 있는데 그 것이 영향이 있을까요??
좀 더 찾아 보고 알아 봐야겠네요..
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
<form name="fsearch" id="fsearch" action="/shop/search.php" method="get" onsubmit="return custom_search_submit(this);">

<input type="text" name="q" id="sch_str" placeholder="검색어를 입력하세요" autocomplete="off">
<button type="submit" id="sch_submit"class="btn-search"><i class="fa fa-search"></i>

<script>
$(function() {
var keywords = ["원피스", "청바지", "에코백", "여름신상"];
var i = 0;
var $input = $('#sch_str');

function rotatePlaceholder() {
$input.attr("placeholder", keywords[i]);
i = (i + 1) % keywords.length;
}
var rollingInterval = setInterval(rotatePlaceholder, 3000);

// 클릭 시 즉시 이동
$input.on('click', function() {
var p = $(this).attr("placeholder");
if (p && keywords.indexOf(p) !== -1) {
location.href = "/shop/search.php?q=" + encodeURIComponent(p);
}
});
});
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
// 폼 전송 시 실행될 새로운 함수
function custom_search_submit(f) {
var $input = $('#sch_str');
var val = $input.val().trim();
var ph = $input.attr("placeholder");

// 1. 값이 비어있다면 placeholder 값을 강제로 입력창에 주입
if (val === "") {
var keywords = ["원피스", "청바지", "에코백", "여름신상"];
if (ph && keywords.indexOf(ph) !== -1) {
$input.val(ph); // 실제 값을 채움
f.q.value = ph; // form 객체에도 전달
}
}

// 2. 이제 원래 있던 이윰의 체크 로직을 실행 (값이 채워졌으므로 통과됨)
if (f.q.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.q.focus();
return false;
}
return true;
}
</script> 참고해 보세요.
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
글자수가 1,000자 네요 스크립트는 이어 지는겁니다.
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
저는 영카트 사용중(테스트중) 이여서요. 위에 링크 bbs 쪽으로 변경 후 테스트 해 보세요.
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
수정이 안되네요. ???? 댓글이 .... 클릭시 + 검색 버튼 클릭시 둘다 이동 됩니다.
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
ysmoto.kr
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
// window 객체에 직접 등록해야 wrest.js와 충돌 없이 호출됩니다.
window.custom_search_submit = function(f) {
var $input = $('#sch_str');
var val = $input.val().trim();
var ph = $input.attr("placeholder");

// 1. 값이 없으면 placeholder 주입
if (val === "" && ph && ph !== "검색어를 입력하세요") {
$input.val(ph);
f.q.value = ph;
} else {
f.q.value = val;
}

// 2. 최소 2글자 체크
if (f.q.value.trim().length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
$input.focus();
return false;
}
return true; // 이제 정상적으로 action="/shop/search.php"로 넘어갑니다.
};
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 5일 전
$(function() {
var keywords = ["오일", "필터", "열선", "윤슬모토"];
var i = 0;
var $input = $('#sch_str');

function rotatePlaceholder() {
$input.attr("placeholder", keywords[i]);
i = (i + 1) % keywords.length;
}
setInterval(rotatePlaceholder, 3000);

// 클릭 시 이동 (입력창이 비어있을 때만)
$input.on('click', function() {
if ($(this).val().trim() === "") {
var ph = $(this).attr("placeholder");
if (ph && keywords.indexOf(ph) !== -1) {
location.href = "/shop/search.php?q=" + encodeURIComponent(ph);
}
}
});
}); 이걸로 수정해 주세요. 검색쪽 버튼이 안 눌려 지는 오류가 있었습니다. ~_~
희야아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 4일 전
아침에 출근해서 적용해 보니 잘 됩니다. 정말 감사합니다.
혹시 윤슬모토 운영자이시면 검색창 소스 좀 받을 수 있을까요? 너무 너무 좋던데요..^ 저도 한번 적용해 보고 싶네요..
Drifter
프로필 보기이 회원 글보기이 회원의 댓글보기
 4일 전
그누보드만 쓰시는지 영카트를 쓰시는지 ....
메인 쪽 이야기 하시는 건가요? 아님 분류(카테고리)쪽? 아님 통합검색 .... 메인 쪽 이야기 하시는듯 하시네요.

https://sir.kr/boards/g5_skin?category=&category=&search_type=subject_content&keyword=%EC%9D%B8%EA%B8%B0%EA%B2%80%EC%83%89%EC%96%B4

트리플님 자료 중 보이는 순서대로 2번째 세번째 응용 한거예요. 저도 <? 이걸로 시작해서 ?> 로 끝난다 밖에 모르는 사람이 라 ..... 딱히 조언 드릴께 없습니다. 한번 해 보시고 잘 안되시면 글 남겨 주세요. 분류내 검색은 영카트 팁 자료실에 올려져 있습니다. 통합검색은 아직 혼자만 사용 하고 있습니다. 계속 테스트 중 이여서 언제 오픈 할지 모르겠네요. 하던 일이 밀려 있어서.ㅠㅠ 고맙습니다.
희야아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 4일 전
네..감사합니다. 천천히 적용해 보겠습니다.
여러가지로 정말 도움 많이 되었습니다. 고맙습니다.

답변을 작성하려면 로그인이 필요합니다.