쪽지스킨 사용중인데 안되는부분으로 질문드립니다..

쪽지스킨 사용중인데 안되는부분으로 질문드립니다..

QA

쪽지스킨 사용중인데 안되는부분으로 질문드립니다..

본문

https://sir.kr/g5_skin/39250#c_56345
위의 쪽지스킨을 쓰고 있습니다.

 

위에 회원아이디 검색하는 부분이 있는데,
검색하고나면 검색된 아이디 나오는 위치가 아래 top 360px 으로 지정됩니다.

이부분을 특정 div 안에 넣을수 없나요...

 

        $("#sch_stx").autocomplete({  //오토 컴플릿트 시작
            source : searchSource,    // source 는 자동 완성 대상
            select : function(event, ui) {    //아이템 선택시
                console.log(ui.item);
            },
            focus : function(event, ui) {    //포커스 가면
                return false;//한글 에러 잡기용도로 사용됨
            },
            open: function(){
                $('.ui-autocomplete').css('width', '100%');
                $('.ui-autocomplete').css('top', '360px');
                $('.ui-autocomplete').css('left', '0px');
                $('.ui-autocomplete').css('font-size', '16px');
                $('.ui-autocomplete').css('border', '0px');
                $('.ui-autocomplete').css('background-color', '#fff');
                $('.ui-autocomplete').css('max-height', '190px');
                $('.ui-autocomplete').css('overflow-y', 'scroll');
                $('.ui-autocomplete').css('overflow-x', 'hidden');
                $('.ui-autocomplete').css('border-bottom', '1px solid #eee');
                $('.ui-autocomplete').css('box-shadow', '10px 0px 10px rgba(0,0,0,0.1)');
                $('.ui-autocomplete').css('box-sizing', 'border-box');
                $('.ui-menu-item-wrapper').css('padding', '10px 10px 10px 10px');
                $('.ui-menu-item-wrapper').css('border', '0px');
                $('.ui-state-active').css('background', '#f9f9f9');
                $('.ui-state-active').css('font-weight', 'bold');
            },

이 질문에 댓글 쓰기 :

답변 3

다음과 같은 방법도 있으니 참고해 보시면 어떨까 합니다.


$("#sch_stx").autocomplete({
  source: function(request, response) {
    // 검색 결과를 가져오는 비동기 함수
    // 검색 결과를 response() 함수에 전달하여 자동완성 목록을 생성
    // 예시: 검색 결과를 AJAX 요청하여 가져오는 경우
    $.ajax({
      url: "검색 결과를 가져올 URL",
      data: {
        term: request.term
      },
      success: function(data) {
        response(data); // 검색 결과를 response() 함수에 전달
      }
    });
  },
  select: function(event, ui) {
    console.log(ui.item);
  },
  // focus, open, 그 외 스타일 관련 옵션은 동일하게 유지
  // ...
  appendTo: "#특정_div_id" // 검색 결과를 특정 div에 삽입
});

 

url: "검색 결과를 가져올 URL",  //실제 검색결과를 가져오는 URL 로 변경.

appendTo: "#특정_div_id" // 실제로 검색 결과를 표시할 div의 ID로 변경

 

이렇게 했을 경우 검색 결과가 지정한 div 내에 표시되도록 설정할 수있지 않을까 하는 생각입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,721 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT