I am using the following JqueryUI autcomplete code for my personal project, but it conflicts with easyui.
$(document).on('focus','.autocomplete_txt', function(){
type = $(this).data('type');
if(type =='batch' ) autoTypeNo=0;
if(type =='name' ) autoTypeNo=1;
$(this).autocomplete( {
source: function( request, response ) {
$.ajax({
url : 'loaditems.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $j.map( data, function( item ) {
var code = item.split("|");//data from loaditem.php are separated with pipe
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#itemNo_'+id[1]).val(names[0]);
$('#itempName_'+id[1]).val(names[1]);
$('#quantity_'+id[1]).val();
$('#price_'+id[1]).val(names[2]);
$('#total_'+id[1]).val( 1*names[2] );
$('#itemtid_'+id[1]).val(names[3]);
$('#catid_'+id[1]).val(names[4]);
$('#itemUnit_'+id[1]).val(names[5]);
$('#drid_'+id[1]).val(names[6]);
calculateTotal();
},
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 90009);
}
});
});
So I used this workaround:
var $j = $.noConflict(true);
and added
j to every
$ of the JqueryUI version. The best Easyui Version I come across the forum and the site is
combobox . But after several attempts, I could not come to solution because my combox is in a loop. Here is the jquery loop where I am trying to put the combobox.
$(document).ready(function() {
var i=$('#dlg table tr').length;
$(".addmore").on('click', function(){
console.log('test');
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><input type="text" style="width:100%;" data-type="batch" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off" placeholder="Scan Barcode"></td>';
html += '<td><input type="text" data-type="name" name="itempName[]" id="itempName_'+i+'" class="form-control autocomplete_txt" autocomplete="off" style="width:100%;" placeholder="Item Name"></td>';
html += '<td><input class="form-controller man" name="itemUnit[]" id="itemUnit_'+i+'" data-type="itemUnit" style="width:100%;" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="hidden" data-type="drid" name="drid[]" id="drid_'+i+'" class="autocomplete_txt did" autocomplete="off"><input type="hidden" data-type="id" name="itemtid[]" id="itemtid_'+i+'" class="autocomplete_txt pid" autocomplete="off"><input type="number" value="1" style="width:100%;" min="1" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="number" min="1" style="width:100%;" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"><input type="hidden" name="catid[]" id="catid_'+i+'" class="autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="number" min="1" style="width:100%" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '</tr>';
$('#dlg table').append(html);
i++;
});
});
When I used combobox, it did not come in the newly added row when user click add-more button. It works only with the first row.
I would love to see if the same JqueryUI code can be achieved with Easyui alone.
Thanks