[jQuery] 페이지마다 다른 버전의 jQuery 로드하기 (with Autocomplete)

페이지마다 다른 버전의 jQuery 로드하기

 

jQuery의 autocomplete 기능이 TypeError: $(...).autocomplete is not a function 에러가 뜨며 기능이 동작하지 않음

autocomplete 기능이 jQuery의 모든 버전에서 작동하는 것이 아니기 때문

기능이 작동하는 jQuery 버전(1.12.1)을 사용하기 위하여 페이지에 필요한 페이지에서만 가져와 사용하기로 함

 

---

다른 버전의 jQuery가 필요한 페이지에 jQuery 로드하여 변수로 지정해놓고 필요한 곳에 지정해놓고 사용

 

1️⃣ 필요한 페이지 상단에 모듈 불러오기 

2️⃣ script 태그 안에 변수로 지정해놓기

3️⃣ 필요할 때 사용 - $(document) 대신 $j112(document) 이런 식으로 사용 가능

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
const $j112 = jQuery.noConflict();
<script>

 

---

예시 - searchList.jsp

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
const $j112 = jQuery.noConflict();

// 자동완성
$j112(document).ready(function(){
    $j112("#search").autocomplete({
      source: function(request, response){
    	   $j112.ajax({
    		  dataType:'json',
    		  url:"${ pageContext.request.contextPath }/search/autoComplete.do",
    		  data: {keyword : encodeURIComponent(request.term)}, //after the input event
    		  success: function(data){	  
    			response(data);
    		  },
    		  error : function(xhr, status, err){
    				console.log("처리실패", xhr, status, err);
    		  }
    	  }); 
      },
      minLength : 2,
      select: function(event, ui){
    	    $j112("#search").val(this.value);
      }
    });
    
});
</script>