我的jquery代码就是这个。
我使用过autocomplete和jskeyboard.js但是自动完成功能不起作用。请给我一些建议。我寻找更多但没有成功。一件事：如何在这个键盘中添加硬件键盘的所有功能。
//adds extra table rows
var i = $('table#invoiceTable tr').length;
$("#addmore").on('click', function() {
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><span id="snum">' + i + '</span>';
html += '<td style="display:none;"><input type="text" data-type="id" name="data[' + i + '][id]" id="id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="display:none;"><input type="text" data-type="vendor_id" name="data[' + i + '][vendor_id]" id="vendor_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td><input type="text" data-type="productCode" name="data[' + i + '][productCode]" id="itemNo_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td style="display:none;"><input type="text" data-type="product_id" name="data[' + i + '][product_id]" id="product_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="textAlign"><input type="text" data-type="productName" name="data[' + i + '][product_name]" id="itemName_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td style="display:none;"><input type="text" data-type="bar_code" name="data[' + i + '][bar_code]" id="bar_code_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td><input type="text" data-type="product_hsn" name="data[' + i + '][product_hsn]" id="itemName_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="CGST" name="data[' + i + '][CGST]" id="CGST_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="SGST" name="data[' + i + '][SGST]" id="SGST_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="price" name="data[' + i + '][price]" id="price_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[' + i + '][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="text" name="data[' + i + '][total]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td style="display:none;"><input type="text" data-type="mar_price" name="data[' + i + '][mar_price]" id="mar_price_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="display:none;"><input type="text" data-type="percentage_of_admin" name="data[' + i + '][percentage_of_admin]" id="percentage_of_admin_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="display:none;"><input type="text" data-type="percentage_of_beneficiary" name="data[' + i + '][percentage_of_beneficiary]" id="percentage_of_beneficiary_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="display:none;"><input type="text" data-type="cast_price" name="data[' + i + '][cast_price]" id="cast_price_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="display:none;"><input type="text" data-type="canteen_id" name="data[' + i + '][canteen_id]" id="canteen_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '<td style="display:none;"><input type="text" data-type="vendor_id" name="data[' + i + '][vendor_id]" id="vendor_id_' + i + '" class="form-control autocomplete_txt" autocomplete="off" style="display:none;"></td>';
html += '</tr>';
$('table#invoiceTable').append(html);
i++;
});
//to check all checkboxes
$(document).on('change', '#check_all', function() {
$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});
//deletes the selected table rows
$("#delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('#check_all').prop("checked", false);
calculateTotal();
});
//autocomplete script
$(document).on('focus change', '.autocomplete_txt', function(e) {
//$(document).on('focus,change','.autocomplete_txt',function(e){
//console.log(e);
type = $(this).data('type');
var ctr = $(this);
if (type == 'product_code') autoTypeNo = 2;
if (type == 'product_name') autoTypeNo = 4;
if (type == 'bar_code') autoTypeNo = 5;
$(this).autocomplete({
source: function(request, response) {
$.ajax({
url: 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function(data) {
console.log(data);
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
value1: code[autoTypeNo],
data: item
}
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function(event, ui) {
$('#addmore').trigger('click');
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
itemNo_1 = $('#id_arr').val();
$('#invoiceTable tr:last td:eq(2) input[type="text"]').val(names[0]);
$('#invoiceTable tr:last td:eq(3) input[type="text"]').val(names[1]);
$('#invoiceTable tr:last td:eq(4) input[type="text"]').val(names[2]);
$('#invoiceTable tr:last td:eq(5) input[type="text"]').val(names[3]);
$('#invoiceTable tr:last td:eq(6) input[type="text"]').val(names[4]);
$('#invoiceTable tr:last td:eq(7) input[type="text"]').val(names[5]);
$('#invoiceTable tr:last td:eq(8) input[type="text"]').val(names[6]);
$('#invoiceTable tr:last td:eq(9) input[type="text"]').val(names[7]);
$('#invoiceTable tr:last td:eq(10) input[type="text"]').val(names[8]);
$('#invoiceTable tr:last td:eq(11) input[type="text"]').val(names[9]);
$('#invoiceTable tr:last td:eq(12) input[type="text"]').val(1);
$('#invoiceTable tr:last td:eq(13) input[type="text"]').val(1 * names[9]);
$('#invoiceTable tr:last td:eq(14) input[type="text"]').val(names[10]);
$('#invoiceTable tr:last td:eq(15) input[type="text"]').val(names[11]);
$('#invoiceTable tr:last td:eq(16) input[type="text"]').val(names[12]);
$('#invoiceTable tr:last td:eq(17) input[type="text"]').val(names[13]);
$('#invoiceTable tr:last td:eq(18) input[type="text"]').val(names[14]);
$('#invoiceTable tr:last td:eq(19) input[type="text"]').val(names[15]);
calculateTotal();
$(this).val("");
return false;
}
});
});
//price change
$(document).on('change keyup blur', '.changesNo', function() {
id_arr = $(this).attr('id');
id = id_arr.split("_");
quantity = $('#quantity_' + id[1]).val();
price = $('#price_' + id[1]).val();
if (quantity != '' && price != '') $('#total_' + id[1]).val((parseFloat(price) * parseFloat(quantity)).toFixed(2));
calculateTotal();
});
$(document).on('change keyup blur', '#tax', function() {
calculateTotal();
});
//total price calculation
function calculateTotal() {
subTotal = 0;
total = 0;
$('.totalLinePrice').each(function() {
if ($(this).val() != '') subTotal += parseFloat($(this).val());
});
$('#subTotal').val(subTotal.toFixed(2));
tax = $('#tax').val();
if (tax != '' && typeof(tax) != "undefined") {
taxAmount = subTotal * (parseFloat(tax) / 100);
$('#taxAmount').val(taxAmount.toFixed(2));
total = subTotal + taxAmount;
} else {
$('#taxAmount').val(0);
total = subTotal;
}
$('#totalAftertax').val(total.toFixed(2));
calculateAmountDue();
}
$(document).on('change keyup blur', '#amountPaid', function() {
calculateAmountDue();
});
//due amount calculation
function calculateAmountDue() {
amountPaid = $('#amountPaid').val();
total = $('#totalAftertax').val();
if (amountPaid != '' && typeof(amountPaid) != "undefined") {
amountDue = parseFloat(total) - parseFloat(amountPaid);
$('.amountDue').val(amountDue.toFixed(2));
} else {
total = parseFloat(total).toFixed(2);
$('.amountDue').val(total);
}
}
//It restrict the non-numbers
var specialKeys = new Array();
specialKeys.push(8, 46); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode;
console.log(keyCode);
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
return ret;
}
//datepicker
$(function() {
$('#invoiceDate').datepicker({});
});
$(document).ready(function() {
if (typeof errorFlag !== 'undefined') {
$('.message_div').delay(5000).slideUp();
}
});
var jsKeyboard = {
settings: {
buttonClass: "button", // default button class
onclick: "jsKeyboard.write();", // default onclick event for button
keyClass: "key", // default key class used to define style of text of the button
text: {
close: "close"
}
},
"keyboard": [], // different keyboards can be set to this variable in order to switch between keyboards easily.
init: function(elem, keyboard) {
jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard;
jsKeyboard.keyboardLayout = elem;
if (keyboard != null && keyboard != undefined)
jsKeyboard.generateKeyboard(keyboard);
else
jsKeyboard.generateKeyboard("default");
jsKeyboard.addKeyDownEvent();
jsKeyboard.show();
$(':input,.autocomplete_txt').not('[type="reset"]').not('[type="submit"]').on('change keyup blur', function(e) {
jsKeyboard.currentElement = $(this);
jsKeyboard.currentElementCursorPosition = $(this).getCursorPosition('.autocomplete_txt');
console.dir('keyboard is now focused on ' + jsKeyboard.currentElement.attr('name') + ' at pos(' + jsKeyboard.currentElementCursorPosition + ')');
});
},
focus: function(t) {
jsKeyboard.currentElement = $(t);
jsKeyboard.show();
},
keyboardLayout: "", // it shows the html element where keyboard is generated
currentKeyboard: "default", // it shows the which keyboard is used. If it's not set default keyboard is used.
currentElement: null,
generateKeyboard: function(keyboard) {
var bClass = "";
var kClass = "";
var onclick = "";
var text = "";
var s = "";
s += "<div id=\"keyboard\">";
s += "<div id=\"keyboardHeader\">";
//s += "<div onclick=\"jsKeyboard.hide();\"><span>" + jsKeyboard.settings.text.close + "</span><span class=\"closex\"> X</span></div>"
s += "</div>";
/*small letter */
s += "<div id=\"keyboardSmallLetter\">";
$.each(jsKeyboard.keyboard[keyboard].smallLetter, function(i, key) {
generate(key);
});
s += "</div>";
/*capital letter*/
s += "<div id=\"keyboardCapitalLetter\">";
$.each(jsKeyboard.keyboard[keyboard].capitalLetter, function(i, key) {
generate(key);
});
s += "</div>";
/*number*/
s += "<div id=\"keyboardNumber\">";
$.each(jsKeyboard.keyboard[keyboard].number, function(i, key) {
generate(key);
});
s += "</div>";
/*symbols*/
s += "<div id=\"keyboardSymbols\">";
$.each(jsKeyboard.keyboard[keyboard].symbols, function(i, key) {
generate(key);
});
s += "</div>";
function generate(key) {
bClass = key.buttonClass == undefined ? jsKeyboard.settings.buttonClass : key.buttonClass;
kClass = key.keyClass == undefined ? jsKeyboard.settings.keyClass : key.keyClass;
onclick = key.onclick == undefined ? jsKeyboard.settings.onclick.replace("()", "(" + key.value + ")") : key.onclick;
text = (key.isChar != undefined || key.isChar == false) ? key.value : String.fromCharCode(key.value);
s += "<div class=\"" + bClass + "\" onclick=\"" + onclick + "\"><div class=\"" + kClass + "\">" + text + "</div></div>";
bClass = "";
kClass = "";
onclick = "";
text = "";
}
$("#" + jsKeyboard.keyboardLayout).html(s);
},
addKeyDownEvent: function() {
$("#keyboardCapitalLetter > div.button, #keyboardSmallLetter > div.button, #keyboardNumber > div.button, #keyboardSymbols > div.button").
bind('mousedown', (function() {
$(this).addClass("buttonDown");
})).
bind('mouseup', (function() {
$(this).removeClass("buttonDown");
})).
bind('mouseout', (function() {
$(this).removeClass("buttonDown");
}));
//key focus down on actual keyboard key presses
//todo:....
},
changeToSmallLetter: function() {
$("#keyboardCapitalLetter,#keyboardNumber,#keyboardSymbols").css("display", "none");
$("#keyboardSmallLetter").css("display", "block");
},
changeToCapitalLetter: function() {
$("#keyboardCapitalLetter").css("display", "block");
$("#keyboardSmallLetter,#keyboardNumber,#keyboardSymbols").css("display", "none");
},
changeToNumber: function() {
$("#keyboardNumber").css("display", "block");
$("#keyboardSymbols,#keyboardCapitalLetter,#keyboardSmallLetter").css("display", "none");
},
changeToSymbols: function() {
$("#keyboardCapitalLetter,#keyboardNumber,#keyboardSmallLetter").css("display", "none");
$("#keyboardSymbols").css("display", "block");
},
updateCursor: function() {
//input cursor focus and position during typing
jsKeyboard.currentElement.setCursorPosition(jsKeyboard.currentElementCursorPosition);
},
write: function(m) {
var a = jsKeyboard.currentElement.val(),
b = String.fromCharCode(m),
pos = jsKeyboard.currentElementCursorPosition,
output = [a.slice(0, pos), b, a.slice(pos)].join('');
jsKeyboard.currentElement.val(output);
jsKeyboard.currentElementCursorPosition++; //+1 cursor
jsKeyboard.updateCursor();
},
del: function() {
var a = jsKeyboard.currentElement.val(),
pos = jsKeyboard.currentElementCursorPosition,
output = [a.slice(0, pos - 1), a.slice(pos)].join('');
jsKeyboard.currentElement.val(output);
jsKeyboard.currentElementCursorPosition--; //-1 cursor
jsKeyboard.updateCursor();
},
enter: function() {
var t = jsKeyboard.currentElement.val();
jsKeyboard.currentElement.val(t + "\n");
},
space: function() {
var a = jsKeyboard.currentElement.val(),
b = " ",
pos = jsKeyboard.currentElementCursorPosition,
output = [a.slice(0, pos), b, a.slice(pos)].join('');
jsKeyboard.currentElement.val(output);
jsKeyboard.currentElementCursorPosition++; //+1 cursor
jsKeyboard.updateCursor();
},
writeSpecial: function(m) {
var a = jsKeyboard.currentElement.val(),
b = String.fromCharCode(m),
pos = jsKeyboard.currentElementCursorPosition,
output = [a.slice(0, pos), b, a.slice(pos)].join('');
jsKeyboard.currentElement.val(output);
jsKeyboard.currentElementCursorPosition++; //+1 cursor
jsKeyboard.updateCursor();
},
show: function() {
$("#keyboard").animate({
"bottom": "0"
}, "slow", function() {});
},
hide: function() {
$("#keyboard").animate({
"bottom": "-350px"
}, "slow", function() {});
},
defaultKeyboard: {
capitalLetter: [
],
smallLetter: [
// 1st row
// 2nd row
{
value: 48
}, {
value: 49
}, {
value: 50
},
{
value: 51
}, {
value: 52
}, {
value: 53
},
{
value: 54
}, {
value: 55
}, {
value: 56
}, {
value: 57
}, {
value: 46
},
{
value: "Delete",
isChar: "false",
onclick: "jsKeyboard.del()",
buttonClass: "button button_del",
keyClass: "key key_del"
}
],
number: [
],
symbols: [
]
}
}
// GET CURSOR POSITION
jQuery.fn.getCursorPosition = function() {
if (this.length == 0) return -1;
return $(this).getSelectionStart();
}
//Autocomplete
jQuery.fn.getSelectionStart = function() {
if (this.length == 0) return -1;
input = this[0];
var pos = input.value.length;
if (input.createTextRange) {
var r = document.selection.createRange().duplicate();
r.moveEnd('character', input.value.length);
if (r.text == '')
pos = input.value.length;
pos = input.value.lastIndexOf(r.text);
} else if (typeof(input.selectionStart) != "undefined")
pos = input.selectionStart;
return pos;
}
//SET CURSOR POSITION
jQuery.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
我们如何在键盘和计算中使用自动完成功能？
答案 0 :(得分：0)
从我所看到的，你定义了一个jsKeyboard对象，但你没有做任何事情。您可能需要调用jsKeyboard函数，以便在您的环境中初始化。
此外，jsKeyboard会对接受该功能的小部件执行自动初始化。但是，这仅适用于已具有名为jsKeyboard的类的小部件。如果在加载jsKeyboard后添加此类项目，则新添加的项目可能无法自动运行...
<input class="jsKeyboard" .../>
如果您还没有，则需要拨打电话。默认代码如下：
$(".jsKeyboard").jsKeyboard(true);
但是，如果您已在变量中拥有新对象，则只需调用：
my_widget.jsKeyboard(true);
就足够了。如果您的新对象是从HTML添加的，但是包含标识符标识符，您可以：
$("#my-object-id").jsKeyboard(true);
关于你的“硬件键盘”问题，我不太清楚jsKeyboard还没有提供你想要的东西。