使用条形码扫描仪自动完成Jquery ui，在焦点输出时删除文本

Question

我有两个输入字段一个接一个地出现：

<input class="inputItemNum ui-autocomplete-input" id="tbAutoItemCode1" name="tbAutoItemCode1" type="text" value="" indexer="1" onkeydown="return (event.keyCode!=13);" autocomplete="off">
<input class="inputItemName ui-autocomplete-input" id="tbAutoItemName1" name="tbAutoItemName1" type="text" value="" indexer="1" onkeydown="return (event.keyCode!=13);" autocomplete="off">

第一个表示项目代码，另一个表示项目名称。 在他们两个我使用jquery-ui自动完成并在两种情况下： 1）关于输入 2）关注焦点

我需要自动完成on focusout，因为我使用带有条形码扫描器的Android设备，插入两个Tab字符作为输入后缀，因此当读取输入到项目num时，它会执行自动完成并在离开输入时元素（带有一个标签后缀），它检查项目数是否正常（再次使用自动完成 - 因为用户可能手动输入一个不存在的项目代码 - 在这种情况下我将清理输入字段。）

还需要提一下我的自动完成列表来自ajax请求。 我面临的问题是，当使用条形码扫描器读取项目num时，它还会填充项目名称（如预期的那样），但有时它会在项目名称填充后删除项目名称。

我认为它与async ajax请求有关（当响应返回时，选项卡后缀已经插入并且字段已被清除）所以我尝试使用ajax async:false但仍然没有运气。我希望有人能帮助我。 这是我使用自动填充的javascript代码：

$(document).on('input', '.inputItemNum', function () {

    var inputId = $(this).attr("id");
    var text = $(this).val();
    var index = $(this)[0].attributes["indexer"].value;
    if (text.length > 0) {
        $(this).autocomplete({
            //Alina 22-09-2016  after press a key, it takes 0ms(by default: 300ms) before it re-evaluates the dataset.
            delay: 100,
            focus: function () {
                $(".autoCompleteItemCode").autocomplete("option", "delay", 0);
            },
            source: function (request, response) {

                $.ajax({
                    url: "Services/FacAjax.asmx/getCompletionItemList",
                    data: JSON.stringify({ "prefixText": text, "count": 40, 'mode': 'code' }),
                    dataType: "json",
                    type: "POST",
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            // console.log(item);
                            return {
                                value: item.ItemCode,
                                code: item.ItemCode,
                                name: item.ItemName,
                                price: item.ItemPrice,
                                multiple: item.Multiple,
                                vat: item.Vat,
                                discount: item.Discount
                            }

                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //alert(errorThrown);
                        return false;
                    }
                });
            },
            minLength: 1,
            autoFocus: true,
            select: function (event, ui) {

                $("#tbAutoItemCode" + index).val(ui.item.code);
                $("#tbAutoItemName" + index).val(ui.item.name);
                $("#tbAutoItemPrice" + index).val(numberToCurrency(ui.item.price));
                $("#tbAutoItemMultiple" + index).val(ui.item.multiple);

                var l_DiscPrcnt = Math.round(ui.item.discount * 100) / 100;

                $("#tbAutoItemDiscountPercent" + index).val(l_DiscPrcnt);

                //round the display of discount percent to two decimal places
                var l_nAfterDiscount = (ui.item.price * ui.item.multiple) - ((ui.item.price * ui.item.multiple) * (ui.item.discount / 100));
                l_nAfterDiscount = Math.round(l_nAfterDiscount * 100) / 100;
                $("#tbAutoItemAfterDiscount" + index).val(l_nAfterDiscount);
                $("#tbVatPer" + index).val(ui.item.vat);
                $("#tbItemVat" + index).val(l_nAfterDiscount * ui.item.vat / 100);
                $("#tbAutoItemComments" + index).click(function () {
                    //openItemDescription(ui.item.code, ui.item.name)
                    return false;
                });

                reCalculateRow(index);
                event.preventDefault();
                //event.stopPropogation();
                //focusQtyColumn(index);
                focusItemNameColumn(index);
                $(".ui-autocomplete").hide();
                //addRow();
                return false;
            }
        });

    } // if length > 0


}); //keyup

  $(document).on('keydown', '.inputItemNum', function (event) {
        var code = event.keyCode || event.which;
        if (code == '9') {
            //alert("Tab Pressed");
            event.stopPropagation();
            return;
        }

  });


$('.inputItemNum').live("focusout", function () {
    var index = $(this)[0].attributes["indexer"].value;
    if ($(this).val() == "") { return; };

    //console.log("Lost focus from indexer " + indexer + " with value " + $(this).val());
    $.ajax({
        url: "Services/FacAjax.asmx/getCompletionItemList",
        data: "{ 'prefixText': '" + $(this).val() + "','count': '1','mode':'exact_code'}", //search for exact code!
        dataType: "json",
        type: "POST",
        async: true,
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (dataArr) {

            if (dataArr.d.length == 0) {
                // $("#tbAutoItemCode" + indexer).val("");
                clearRowData(index);
                reCalculateRow(index);
                return;
            }
            var data = dataArr.d[0];

            $("#tbAutoItemCode" + index).val(data.ItemCode);
            $("#tbAutoItemName" + index).val(data.ItemName);
            $("#tbAutoItemPrice" + index).val(numberToCurrency(data.ItemPrice));
            $("#tbAutoItemMultiple" + index).val(data.Multiple);

            var l_DiscPrcnt = Math.round(data.Discount * 100) / 100;

            $("#tbAutoItemDiscountPercent" + index).val(l_DiscPrcnt);

            //round the display of discount percent to two decimal places
            var l_nAfterDiscount = (data.ItemPrice * data.Multiple) - ((data.ItemPrice * data.Multiple) * (data.Discount / 100));
            l_nAfterDiscount = Math.round(l_nAfterDiscount * 100) / 100;
            $("#tbAutoItemAfterDiscount" + index).val(l_nAfterDiscount);
            $("#tbVatPer" + index).val(data.Vat);
            $("#tbItemVat" + index).val(l_nAfterDiscount * data.Vat / 100);
            $("#tbAutoItemComments" + index).click(function () {
                openItemDescription(data.ItemCode, data.ItemName)
                return false;
            });

            reCalculateRow(index);
            focusItemNameColumn(index);
            //focusQtyColumn(index);
            $(".ui-autocomplete").hide();
            return false;
        }

    })
}); //focusout

$(document).on('input', '.inputItemName', function () {

    var inputId = $(this).attr("id");
    var text = $(this).val();
    var index = $(this)[0].attributes["indexer"].value;
    if (text.length > 0) {
        $(this).autocomplete({
            //Alina 22-09-2016  after press a key, it takes 0ms(by default: 300ms) before it re-evaluates the dataset.
            delay: 0,
            focus: function () {
                $(".autoCompleteItemCode").autocomplete("option", "delay", 0);
            },
            source: function (request, response) {

                $.ajax({
                    url: "Services/FacAjax.asmx/getCompletionItemList",
                    data: JSON.stringify({ 'prefixText': text, 'count': 40, 'mode': 'name' }),
                    dataType: "json",
                    type: "POST",
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            // console.log(item);
                            return {
                                value: item.ItemName,
                                code: item.ItemCode,
                                name: item.ItemName,
                                price: item.ItemPrice,
                                multiple: item.Multiple,
                                vat: item.Vat,
                                discount: item.Discount
                            }

                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //alert(errorThrown);
                        return false;
                    }
                });
            },
            minLength: 1,
            autoFocus: true,
            select: function (event, ui) {

                $("#tbAutoItemCode" + index).val(ui.item.code);
                $("#tbAutoItemName" + index).val(ui.item.name);
                $("#tbAutoItemPrice" + index).val(numberToCurrency(ui.item.price));
                $("#tbAutoItemMultiple" + index).val(ui.item.multiple);

                var l_DiscPrcnt = Math.round(ui.item.discount * 100) / 100;

                $("#discount" + index).val(l_DiscPrcnt);

                //round the display of discount percent to two decimal places
                var l_nAfterDiscount = (ui.item.price * ui.item.multiple) - ((ui.item.price * ui.item.multiple) * (ui.item.discount / 100));
                l_nAfterDiscount = Math.round(l_nAfterDiscount * 100) / 100;
                $("#tbAutoItemAfterDiscount" + index).val(l_nAfterDiscount);
                $("#tbVatPer" + index).val(ui.item.vat);
                $("#tbItemVat" + index).val(l_nAfterDiscount * ui.item.vat / 100);
                $("#tbAutoItemComments" + index).click(function () {
                    openItemDescription(ui.item.code, ui.item.name)
                    return false;
                });

                reCalculateRow(index);
                if(index == $('#orderTable tr:last').index()){
                    addRow();
                }
                return false;
            }
        });

    } // if length > 0
}); //keyup



 $('.inputItemName').live("focusout", function () {


    var index = $(this)[0].attributes["indexer"].value;
    var text = $(this).val().trim();
    if (text.length == 0) { return };
    setTimeout(function(){
    //console.log("Lost focus from indexer " + indexer + " with value " + $(this).val());
    $.ajax({
        url: "Services/FacAjax.asmx/getCompletionItemList",
        data: "{ 'prefixText': '" + text + "','count': '1','mode':'name'}", //search for name!
        dataType: "json",
        type: "POST",
        async: false,
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (dataArr) {

            if (dataArr.d.length == 0) {
                $("#tbAutoItemName" + index).val("");
                reCalculateRow(index);
                return;
            }
            var data = dataArr.d[0];

            $("#tbAutoItemCode" + index).val(data.ItemCode);
            $("#tbAutoItemName" + index).val(data.ItemName);
            $("#tbAutoItemPrice" + index).val(numberToCurrency(data.ItemPrice));
            $("#tbAutoItemMultiple" + index).val(data.Multiple);

            var l_DiscPrcnt = Math.round(data.Discount * 100) / 100;

            $("#tbAutoItemDiscountPercent" + index).val(l_DiscPrcnt);

            //round the display of discount percent to two decimal places
            var l_nAfterDiscount = (data.ItemPrice * data.Multiple) - ((data.ItemPrice * data.Multiple) * (data.Discount / 100));
            l_nAfterDiscount = Math.round(l_nAfterDiscount * 100) / 100;
            $("#tbAutoItemAfterDiscount" + index).val(l_nAfterDiscount);
            $("#tbVatPer" + index).val(data.Vat);
            $("#tbItemVat" + index).val(l_nAfterDiscount * data.Vat / 100);
            $("#tbAutoItemComments" + index).click(function () {
                openItemDescription(data.ItemCode, data.ItemName)
                return false;
            });

            reCalculateRow(index);
            //focusItemNameColumn(index);
            //focusQtyColumn(index);
            $(".ui-autocomplete").hide();
            return false;
        }

    }) }, 500);
}); //focusout


// for bar-code scanner
$(".inputItemNum").live('click', function () {
    $(this).select();
});

$(".inputItemName").live('click', function () {
    $(this).select();
});