jQuery UI自动完成具有Ajax结果的多个输入字段

我正在尝试做其他几个人在这里完成的工作。我已经尝试了所有可用的示例，但似乎无法使它正常工作。我已经复制了工作示例并反映了一些更改，以适应我的情况，纳达也是如此。

我正在使用的HTML看起来像这样。

<tr>
            <td><a id="remRow"><span class="icon icon-squared-cross"></span></a></td>
            <td><input type="hidden" data-type="itemID" name="itemID[]" id="itemID" class="form-control autocomplete_txt" autocomplete="off">
            <input type="text" data-type="item_name" name="item_name[]" id="item_name" class="form-control autocomplete_txt" autocomplete="off" placeholder="Item Name"></td>
            <td><input type="text" name="item_sku[]" id="item_sku" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="SKU#"></td>
            <td><input type="text" name="item_qty[]" id="item_qty" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="Qty"></td>
            <td><input type="text" name="item_rate[]" id="item_rate" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="Cost"></td>
            <td><input type="text" name="balance[]" id="balance" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" placeholder="Balance"></td>
            </tr>

我已经从一个可行的源获得的jQuery进行演示

//autocomplete script
$(".autocomplete_txt").keyup(function(){
    type = $(this).data('type');
    if(type =='itemID' )autoTypeNo=0;
    if(type =='item_name' )autoTypeNo=1;    
    $(this).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url : 'ajax.php',
                dataType: "json",
                method: 'post',
                data: {
                   name_startsWith: request.term,
                   type: type
                },
                 success: function( data ) {
                     response( $.map( data, function( item ) {
                        var code = item.split("|");
                        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("_");
            element_id = id[id.length-1];
            $('#itemID_'+element_id).val(names[0]);
            $('#item_name_'+element_id).val(names[1]);
            /*$('#quantity_'+element_id).val(1);
            $('#price_'+element_id).val(names[2]);
            $('#total_'+element_id).val( 1*names[2] );*/
            calculateTotal();
        }               
    });
});

最后，PHP处理json。

case "fetchAll": {

        $query = $db->rawQuery("SELECT itemID, item_name, item_sku FROM items ORDER BY item_name ASC");
        if($query) {
            $data = array();
            foreach($query as $key => $val) {
                //echo $val['itemID'];
                $name = $val['itemID'].'|'.$val['item_name'].'|'.$val['item_sku'];
                array_push($data, $name);
            }

            echo json_encode($out); 
        } else { echo "error"; }
    }
    break;

我不断收到Uncaught TypeError：无论我使用哪个示例，都无法读取未定义的属性“ length”。我尝试使用jquery 3.0，并下载了最新的jquery.ui，认为这可能是问题所在。我还尝试过恢复到较旧的版本以进行检查。

在这一点上，我确信我只是缺少一些东西。3天有点荒谬，所以我需要帮助。我知道堆栈上也有类似的问题，是的，我已经尝试了全部。如果您还没有准备好猜测，那么我对jquery不太满意。我什至可以使其他所有功能都可以正常工作，甚至可以执行ajax调用，但是，这...

问候。