modal 창의 inputbox에 붙어야 할 autocomplete가 엉뚱한 곳에 붙을때
2023. 2. 17. 11:41ㆍ99. 정리전 - IT/12. Javascript
모달창에서 동적으로 생성되는 inputbox에 ajax로 db의 상품을 like 로 긁어와서 autocomplete 뿌려주려고 함.
모달창의 내역부분에 autocomplete를 붙여 놨더니, 보이지도 않는 dim 처리 되어있는 좌상단에 선택콤포넌트가 숨어있음
TASK
1) 숨어있는 autocomplete 의 머리 끄덩이를 잡고 팝업창 위로 끌어내자!
2) input box를 클릭하면 autocomplete 셀렉트박스가 나오도록
html -> section 부분은 모달입NI다.
<!-- [D]팝업 : w:1080 / pop_container 최대 높이값 865 : 865이상 컨텐츠가 들어가면 자동 세로 스크롤 생김 (최소해상도:1280:1024 기준) -->
<section id="popEstimateWrite" class="pop_wrap pop_wrap_wid1">
<tbody id="prodList" />
</selection>
js -> "모달창에 autocomplete 붙이는 법" 1번과 2번을 잘 보세요.
$(document).ready(function () {
// 견적서등록 빨간라인 중 거래명세서내역 그리기
const t1 = "<td><span class='input_box2'><input type='text' placeholder='' class='input_txt3 align_l' title=";
const t2 = "<td><span class='input_box2'><input type='text' placeholder='' class='input_txt3 align_cn' title=";
const t3 = "<td><span class='input_box2'><input type='text' placeholder='' class='input_txt3 align_r' title=";
const t4 = "></span></td>";
const h1 = "<tbody id='prodList'>";
let h2 = (id) => {
return "<tr>"
+ t2 + "'월' id='month_" + id + "' name='month' numberOnly" + t4
+ t2 + "'일' id='day_" + id + "' name='day' numberOnly" + t4
+ t1 + "'내역' id='prodNm_" + id + "' name='prodNm' " + t4
+ t2 + "'규격' id='standard_" + id + "' name='standard' " + t4
+ t3 + "'수량' id='shippingQuantity_" + id + "' name='shippingQuantity' numberOnly" + t4
+ t3 + "'회수수량' id='returnQuantity_" + id + "' name='returnQuantity' numberOnly" + t4
+ t3 + "'재고수량' id='bucketQuantity_" + id + "' name='bucketQuantity' numberOnly" + t4
+ t3 + "'단가' id='unitPrice_" + id + "' name='unitPrice' numberOnly" + t4
+ t3 + "'공급가액' id='supply_" + id + "' name='supply' numberOnly" + t4
+ t3 + "'세액' id='tax_" + id + "' name='tax' numberOnly" + t4
+ t3 + "'총액' id='totalPrice_" + id + "' name='totalPrice' numberOnly" + t4
+ "</tr>";
}
const h3 = "</tbody>";
let tmp;
for (let i=1; i<=8; i++) {
tmp = tmp + h2(i);
}
$("#prodList").replaceWith(h1 + tmp + h3);
// input tag에 숫자(+천단위 콤마)만 받겠음
$("input:text[numberOnly]").on("keyup", function() {
$(this).val(priceToString($(this).val().replace(/[^0-9]/g,"")));
});
//---------------------------------------------------------------------------------------------
// 품목 autocomplete
//---------------------------------------------------------------------------------------------
$('input[name=prodNm]').focus(function() {
var e = $.Event("keydown", { keyCode: 40 }); // 아래쪽화살표 keyCode
$(this).trigger(e);
});
$('input[name=prodNm]').autocomplete({
source : function( request, response ) { // 자동완성 대상이 되고자 하는 데이터를 입력하는 부분
$.ajax({
async: false,
type: "get",
url: "/api/goods/salesSlip?perPage=999",
contentType: "application/json; charset=utf-8",
data : {
prodNmLike: request.term
},
dataType: "json",
success: function (result) {
const r = result.data.contents;
//서버에서 json 데이터 response 후 목록에 추가
response(
$.map(r, function(item) { // json[i] 번째 에 있는게 item 임.
return {
label: item.prodNm, // 목록에 표시되는 값
value: item.prodNm // 선택 시 input창에 표시되는 값
}
})
);
},
error : function() { // 실패
alert("오류가 발생했습니다.");
}
});
}, // source 는 자동 완성 대상
focus : function(event, ui) { // autocomplete를 한글과 사용할때 커서를 사용해서 아이템을 선택하면 나머지가 사라져 버리는 버그
return false; // return false; 또는 event.preventDefault(); 를 사용해서 이벤트를 무시하게 하는 것
},
select: function (event, ui) { // 아이템 선택시 실행됩니다. ui.item 이 선택된 항목을 나타내는 객체입니다.
// $($(this).attr('id')).val(ui.item.label + " / " + ui.item.value);
console.log("SELECTED : (" + $(this).attr('id')) + ") " + ui.item.label + " / " + ui.item.value);
},
minLength: 0, // 자동완성 기능이 발생하는 최소 글자 수, 0이면 화살표키보드 아래로 했을때 selectbox 나옴
delay: 300, // input Field에 글자를 쓰고 autocomplete 창이 뜰 때까지 걸리는 시간 (ms)
autoFocus: true, // 첫 번째 항목 자동 포커스 발생 여부 설정 (default: false)
classes : { // 위젯 요소에 추가 할 클래스를 지정
'ui-autocomplete' : 'highlight'
},
// disabled: true, // 자동완성 기능 끄기
position: {
my: "right top",
at: "right bottom",
//---------------------------------------------------------------------------------------------
// [02. 모달창에 autocomplete 붙이는 법]
of: $(this).attr('id') // 클릭한 id의 엘리먼트 밑에 선택창이 나오도록 지시
//---------------------------------------------------------------------------------------------
},
close : function(event){ // 자동완성창 닫아질때 호출
// console.log(event);
}
// UI를 마음대로 변경하는 부분 (기본 tag가 li로 되어 있음)
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.label + "</div>" )
.appendTo( ul );
};
//---------------------------------------------------------------------------------------------
// [01. 모달창에 autocomplete 붙이는 법]
// bootstrap modal, 레이어 팝업 위에 검색창을 띄우고 싶은데, 자동 완성 부분이 이상한 곳에 붙어있다면
// appendTo 옵션에 모달창 id를 부여하여 modal 레이어 위에 autocomplete 가 보이도록 함
//---------------------------------------------------------------------------------------------
$('input[name=prodNm]').autocomplete("option", "appendTo", $("#popEstimateWrite"));
});
jpa -> goods.prodNm.like 부분으로 검색
@Override
public List<Goods.Response> findListByRequest(Goods.Request request) {
QGoods goods = QGoods.goods;
QAgency qAgency = QAgency.agency;
JPAQuery<Goods.Response> query = jpaQueryFactory.select(Projections.fields(Goods.Response.class,
goods.id,
goods.prodNm,
goods.stockPrice,
goods.salePrice,
goods.agentId,
goods.prodRtnYnMethod,
goods.useYn,
goods.prodUnitNmMethod,
goods.createdAt,
ExpressionUtils.as(
JPAExpressions
.select(qAgency.agencyName)
.from(qAgency)
.where(qAgency.id.eq(goods.agentId))
, "agentNm")
));
query.from(goods);
if (null != request.getAgentId() && 0 != request.getAgentId()) {
query.where(goods.agentId.eq(request.getAgentId())
);
}
if (!StringUtils.isNullOrEmpty(request.getProdNmLike())) {
query.where(goods.prodNm.like("%" + request.getProdNmLike() + "%")
);
}
List<Goods.Response> contents = query
.orderBy(goods.prodNm.asc())
.fetch();/*fetch 사용*/
/*total Count 쿼리를 직접 날린다.*/
long total = query.fetchCount();
return contents;
}
두 부분만 주의하면 됨
of: $(this).attr('id') // 클릭한 id의 엘리먼트 밑에 선택창이 나오도록 지시$('input[name=prodNm]').autocomplete("option", "appendTo", $("#popEstimateWrite"));