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

2년 전 조회 1,720

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개

채택된 답변
+20 포인트

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

Copy
$("#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 내에 표시되도록 설정할 수있지 않을까 하는 생각입니다.

로그인 후 평가할 수 있습니다

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

class="ui-autocomplete" 의 속성값을 주는것 같은데..

이 부분을 찾아서 <div></div> 를 추가해주면 되는거 아닌가요?

 

로그인 후 평가할 수 있습니다

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

 

일단 아이디로 한다면 제이쿼리로 해서...

let test = 특정한 변수 

$('#'+test) 이렇게 선택자로 주면되요.

로그인 후 평가할 수 있습니다

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

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

로그인
🐛 버그신고