묻고답하기
안녕하세요 jquery를 사용하는데 초보적인 질문이 있습니다.
2015.10.15 09:46
//자동완성
$("#product_name").bind("focus", function(){
$(this).autocomplete({
source:'autocomplete',
minLength:2,
select:function(event, ui){
// $('#product_name').val(ui.item);
$(this).on('blur', function(){
//alert($("#product_name").val());
$(this).parent().next().next().children().first().val(ui.item.price);
});
}
})
});
// +버튼 클릭시 tr라인 추가
$("#addItemBtn").click(function(e){
e.preventDefault();
cnt = $(".tr_flag").length;
//alert(cnt);
//clone
$.trClone = $("#memberTable tr:last").clone(true).html();
$.newTr = $("<tr class='tr_flag'>"+$.trClone+"</tr>");
// var lastItemNo = $("#memberTable tr:last").attr("class").replace("item","");
// $.newTr.find(".pn").attr("id","product_name_"); //+cnt
//append
$("#memberTable").append($.newTr);
//delete Button추가
$.btnDelete = $(document.createElement("input"));
$.btnDelete.attr({
name:"btnRemove",
type:"button",
class:"btn btn-danger",
value:"-"
});
$("#memberTable tr:last td:last").html("");
$("#memberTable tr:last td:last").append($.btnDelete);
$("#memberTable tr>td:last>input[type='button']").on('click', function(){
$(this).parent().parent().remove();
});
});
<div class="form-group">
<h4> Add products</h4>
<button id="addItemBtn">+</button>
<table class="table col-sm-12" id="memberTable">
<tr>
<th>Product </th><th>Size &Color </th><th>Price </th><th>Quantity </th><th>Total </th><th>Sales Price </th><th>remove</th>
</tr>
<tr>
<td>{!! Form::text('product_name',null,['class'=>'form-control pn', 'id'=>'product_name' ])!!}</td>
<td>
{!! Form::text('size_color',null,['class'=>'form-control'])!!}
</td>
<td>
{!! Form::text('price','0',['class'=>'form-control','id'=>'price','readonly'])!!}
</td>
<td>
{!! Form::text('quantity','0',['class'=>'form-control','id'=>'quantity'])!!}
</td>
<td>
{!! Form::text('total',null,['class'=>'form-control','id'=>'total','readonly'])!!}
</td>
<td>
{!! Form::text('sales_price',null,['class'=>'form-control'])!!}
</td>
<td>
</td>
</tr>
</table>
Add product의 + 버튼을 누르면 테이블의 tr한줄을 clone으로 복사하는 기능인데요
여기 첫번째 input text에 jquery UI의 autocomplete 함수는동작되는데
추가되는 input text에도 똑같이 autocomplete함수가 동작하지 않습니다.
추가되는 텍스트 박스에도 똑같이 함수가 동작되게 하고싶은데 안되네요
어떻게든 동작하게 하고싶어서 id에 증가 값을 주고 해보기도 했는데 (함수를 여러개 만드는 방법) 그것도 동작을 안하더라구요 어떻게 해야 깔끔하고 쉽게 동작하게 할수 있을까요?
해결 방법을 찾았습니다.
http://james2013.batcave.net/add_autocomplete.htm 소스보기 하면
autocomplete함수를 function run(){} 으로 감싸주고
한번 실행 시킨후 함수내에서 return false; 를 사용하네요 무슨의미로 return false;를 쓰는지는 자세히 몰라도 이런방식으로 하면
여러개의 input에서 자동완성을 사용할수 있습니다.
run();
function run(){
$(".pn").autocomplete({
source:'autocomplete',
minLength:2,
select:function(event, ui){
$(this).on('blur', function(){
$(this).parent().next().next().children().first().val(ui.item.price);
});
return false;
}
});
}
//추가 버튼 클릭시
$("#addItemBtn").click(function(e){
e.preventDefault();
//clone
$.trClone = $("#memberTable tr:last").clone(true).html();
$.newTr = $("<tr class='tr_flag'>"+$.trClone+"</tr>");
//append
$("#memberTable").append($.newTr);
//delete Button추가
$.btnDelete = $(document.createElement("input"));
$.btnDelete.attr({
name:"btnRemove",
type:"button",
class:"btn btn-danger",
value:"-"
});
$("#memberTable tr:last td:last").html("");
$("#memberTable tr:last td:last").append($.btnDelete);
$("#memberTable tr>td:last>input[type='button']").on('click', function(){
$(this).parent().parent().remove();
});
$(".pn").each(function(){
run();
});
return false;
});