帶有ajax結果的多個輸入字段上的Jquery ui自動完成

Question

我正在嘗試做其他幾個人在堆棧上完成的工作。 我已經嘗試了所有可用的示例，但似乎無法使其正常工作。 我已經復制了工作示例並反映了與我的情況相匹配的更改，但仍然沒有。

我正在使用的 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;

無論我使用什么示例，我都會不斷收到未捕獲的類型錯誤：無法讀取未定義的屬性“長度”。 我嘗試使用 jquery 3.0，並下載了最新的 jquery.ui，認為這可能是問題所在。 我也試過恢復到舊版本來檢查。

在這一點上，我確信我只是錯過了一些東西。 3天有點荒謬所以我尋求幫助。 我知道堆棧上有類似的問題，是的，我都試過了。 如果你還沒有准備好猜到我不太擅長 jquery。 我可以讓其他一切工作，即使是 ajax 調用，但是，這...

問候。

Answer 1

CL哈德曼：

嘗試在您的 head 部分使用以下腳本：

html文件：

<head>

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js'></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<script>

$( document ).ready(function() {

    //autocomplete script
    $(".autocomplete_txt").keyup(function(){
        type = $(this).data('type');
        if(type =='productCode' )autoTypeNo=0;
        if(type =='productName' )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();
            }               
        });
    });


  });




</script>
</head>

我無法復制您的場景，但您似乎與 jquery 腳本存在沖突。 希望這可以幫助...

帶有ajax結果的多個輸入字段上的Jquery ui自動完成

問題描述

1 個解決方案

解決方案1
1 已采納 2016-08-09 13:34:54

帶有ajax結果的多個輸入字段上的Jquery ui自動完成

問題描述

1 個解決方案

解決方案1 1 已采納 2016-08-09 13:34:54

解決方案1
1 已采納 2016-08-09 13:34:54