静的に名前が付けられたテキスト ボックスに対して完全に機能する jQuery オートコンプリートがあります。
私の問題は、後で増分番号を付けて名前を作成したjqueryスクリプトによってテキストボックスが生成されていることです。そのため、オートコンプリート機能が必要な各入力ボックスは異なります。
オートコンプリート スクリプトを編集して、特定の名前の入力ボックスで機能するようにするにはどうすればよいですか?
私は codeigniter と jquery 1.7 を使用しています。
私の見解は次のとおりです。
<table class="authors-list">
<tr><td></td><td>Product</td><td>Qty</td><td>Price/Cube</td><td>Discount</td><td>treated</td></tr>
<tr>
<td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>
<td><input type="text" id="product" name="product" /></td>
<td><input type="text" id="qty" name="qty" /></td>
<td><input type="text" id="pricepercube" name="pricepercube" /></td>
<td><input type="text" id="discount" name="discount" /></td>
<td><input type="text" id="treated" name="treated" /></td>
</tr>
</table>
// 追加の行を生成するスクリプト。入力名にカウンター値が追加されます
<script type="text/javascript">
var counter = 1;
jQuery("table.authors-list").on('change','input[name^="qty"]',function(event){
event.preventDefault();
counter++;
var newRow = jQuery('<tr>'+
' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' +
' <td><input type="text" id="product_' + counter + '" name="product_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>' +
' <td><input type="text" id="qty_' + counter + '" name="qty_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' <td><input type="text" id="pricepercube_' + counter + '" name="pricepercube_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' <td><input type="text" id="discount_' + counter + '" name="discount_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' <td><input type="text" id="treated_ ' + counter + '" name="treated_ ' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' </tr>');
jQuery('table.authors-list').append(newRow);
});
jQuery("table.authors-list").on('click','.deleteRow',function(event){
if ($(this).parents('table').find('tr').length > 2) {
$(this).closest('tr').remove();
}else{
alert ('Form must have at least one row')
}
});
</script>
//オートコンプリートのスクリプト。現在、静的に作成された入力で動作しますproduct
<script type="text/javascript">
$(function(){
$("#product").autocomplete({
source: "get_sku_codes",
messages: {
noResults: '',
results: function() {}
}
});
});
</script>
正しい入力フィールドを参照するようにオートコンプリート フィールドを変更するにはどうすればよいですか? 入力フィールドの名前は正しいですか?
次のようなことができますか:'input[name^="qty"]'または使用する方が良い$thisですか?
前述のように、静的フィールドでproduct機能していますが、動的に作成されたフィールドで機能する必要があります。次product_1のようproduct_2にproduct_3なります。ユーザーが追加する行数がわからないことに注意してください。
Beardfist による更新
<script type="text/javascript">
var counter = 1;
jQuery("table.authors-list").on('change','input[name^="qty"]',function(event){
event.preventDefault();
counter++;
var newRow = jQuery('<tr>'+
' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' +
' <td><input type="text" id="product_' + counter + '" name="product_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>' +
' <td><input type="text" id="qty_' + counter + '" name="qty_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' <td><input type="text" id="pricepercube_' + counter + '" name="pricepercube_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' <td><input type="text" id="discount_' + counter + '" name="discount_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' <td><input type="text" id="treated_ ' + counter + '" name="treated_ ' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
' </tr>');
jQuery('table.authors-list').append(newRow);
$("#product_"+counter).autocomplete({
source: "get_sku_codes",
messages: {
noResults: '',
results: function() {}
}
});
});
jQuery("table.authors-list").on('click','.deleteRow',function(event){
if ($(this).parents('table').find('tr').length > 2) { //get number of rows(TR's) in table
$(this).closest('tr').remove();
}else{
alert ('Form must have at least one row') // alert if only one row left in table
}
});
</script>