아직 테스트 중이긴 한데요. 자료? 소스? 공개해봅니다 :)

게시판 내에서 제이쿼리 UI를 이용한 검색어 자동완성 소스예요.

아직은 제목만 검색 가능한데요.

검색 대상 select 버튼 이벤트에 따라서 제목 이외에도 다양한 검색어 자동완성 기능으로 확장할 수도 있을 것 같아요.

 

(function($){

// AUTOCOMPLETE

var docTitle = [];

// 게시판에서 list_count와 total_page 구하고, 게시물 제목 가져오기
$.exec_json(
    'board.dispBoardContentList',
    {mid: current_mid},
    function(data) {
        var list_count = data.page_navigation.page_count,
            total_page = data.page_navigation.total_page;
        for (var cur_page = 1; cur_page <= total_page; cur_page++) {
            getTitle(cur_page, list_count);
        }
    }
);

// 게시물 제목 얻어오는 함수
function getTitle(cur_page, list_count) {
    $.exec_json(
        'board.dispBoardContentList',
        {mid: current_mid, page: cur_page},
        function(data) {
            for (var i = 0; i < list_count; i++) {
                docTitle[i + ((cur_page - 1) * list_count)] = data.document_list[i].title;
            };
        }
    );
}

// 검색어 자동완성 이벤트
$('input[name="search_keyword"]').autocomplete({
    source: docTitle
});

})(jQuery);;

 

대강 이런 식인데요ㅎㅎ

 

여기서 확인해보세요. https://bit.ly/2IECAeU (현재 작동 중지 ... 애드온 개발 중)

상단 또는 하단의 검색 버튼 누르고 입력창에 입력을 시작하면, 기존 게시물 제목으로 자동완성이 뜰 겁니다.

글쓴이 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile

    이걸 확장해서 애드온을 만들어봐도 좋겠네요 :)

  • profile
    실시간으로 검색을 돌려버리면 서버 부하가... ㄷㄷㄷ

    1초 안에 끝나지 않을 가능성도 있으니 setTimeout이나 전역변수에 의존하지 말고 function(data)에서 직접 다음 단계를 실행하도록 해보세요. getTitle 함수도 그 안으로 집어넣어 버리면 될 것 같습니다.
  • profile profile

    아 맞다ㅜ 게시물이 많은 게시판에선 가급적 추천하지 않아요ㅋㅋㅋㅋ

  • profile profile
    네, 말씀하신대로 고쳤습니다. 역시 훨씬 깔끔하네요ㅎㅎ
    근데 제목 수집만으로도 서버 부하가 그렇게 심한가요??
  • profile profile
    페이지를 전환할 때마다 AJAX 요청이 한 번씩 발생하는 것만으로도 평소의 2배씩 부하가 발생하지요... 게다가 dispBoardContentList라면 total_page값을 구하기 위해 SELECT COUNT(*) 쿼리가 추가로 들어가기 때문에 게시판 부하의 주범이 됩니다 ㅎㅎ

    단, 슈퍼캐시 모듈을 쓰면 SELECT COUNT(*) 쿼리는 피할 수 있어요. 글이 많은 사이트에서는 이 쿼리 하나만 피해도 DB 부하가 50~70% 내려갑니다.

    소스를 보니 최초 요청은 검색도 아니고 그냥 현재 mid의 게시물 제목을 가져오는 것뿐인 듯 한데, 그렇다면 굳이 AJAX 요청을 넣을 것도 없이 현재 페이지의 목록에서 직접 추출하면 안 될까요?
  • profile profile
    아, 어떤 말씀인지 알겠습니다.
    total_page나 list_count 같은 건 그냥 html에 뿌려두고 수집해오거나, 애드온에서 따로 구해와야겠군요.

    근데 게시물 제목 가져오는 건 (나중에 닉네임, 태그도 가져올 계획이고 무엇보다) 현재 페이지가 아니라 전체 페이지에서 가져오고 싶어요. 아, 따로 쿼리를 짜든가 하는 게 나을 수 있겠네요;;;
  • profile

    1.파이어 폭스 문제점

    jquery  autocomplete 는 한글 검색에 문제가 있습니다.

    아래의 코드를 jquery 추가 해주시면 해결될거라 생각됩니다.

     

    if( jQuery.browser.mozilla ){
            setInterval(function() { jQuery(' input[name="search_keyword"] ').filter('[value!=""]:focus').trigger('keydown'); }, 1000);
    }

     

    샘플 url : http://test.catenater.com/xe/pixel 에서 검색 키워드 입력

     

    2.실시간 검색

    기진곰이 말씀해주셨듯 사용자가 마음만 먹으면 D/B에 부하를 심하게 발생할 수 있습니다.

    title을 캐시파일로 만들어 두면 어떨까요.

    물론 이것도 어느정도 한계가 있지만 데이터수의 limit 을 운영자가 설정할 수 있도록 하면 괜찮을것 같습니다.

     

    멋진 애드온 나오길 바라겠습니다!

  • profile profile
    아웅 파폭 팁이랑 캐시 제안!!
    애드온 변수로 데이터 제한하면 괜찮을 거 같네요!
    매번 도움 감사드려요~☆
  • ?
    좋은되요
  • ?
    저는 Full Text 검색 부하때문에 Lucene로 해뒀습니다.
  • ?
    XE에 스핑크스 모듈이 있는걸로 알고있는데 참고해보시면 좋을듯 싶습니다.

    실력도 충분하시니까요
  • ? profile
    공홈 자료실에서 봤는데 왠 외계어들이 이렇게 많대요ㅜㅜ
    전 실력 없어요ㅋㅋㅋㅋㅋ
  • ? profile
    스핑크스 써봣는데 되게 귀찮아요 하하
  • profile profile
    역시ㅋㅋ 딱 봐도 저 같은 문외한한테는 신경 쓸 게 많아보여요
  • profile
    오류발견!
    2페이지 "포유동물" 팝업이 안뜨네요 ^^
    그런데 이 레이아웃? 스킨? 은 뭔가요?
  • profile profile
    레이아웃은 없고 그냥 시험 삼아 스케치북 개조한 스킨이에요. 근데 2페이지 포유동물 팝업이 무슨 말씀이에요?? ⊙○⊙
  • profile profile
    그렇군요. 예뻐서 저도 적용해보고싶네요.
    모바일에서 보니까 2페이지에있는 포유동물이란 제목의 이미지 팝업이 안뜨길래요.
    높이가 제일작은그림이라 그런가봅니다.
  • profile profile
    아, 요소가 바운스 되는 걸 말씀하신 거군요. 그게 모바일에서는 작동 안 하도록 되어 있어요. 정신 없을까봐요ㅎㅎ