【问题标题】:Jquery ui autocomplete on multiple input fields with ajax results带有ajax结果的多个输入字段上的Jquery ui自动完成
【发布时间】:2016-12-14 20:37:47
【问题描述】:

我正在尝试做其他几个人在堆栈上已经完成的事情。我已经尝试了所有可用的示例,但似乎无法使其正常工作。我已经复制了工作示例并反映了与我的情况相匹配的更改,并且仍然是 nada。

我使用的 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();
        }               
    });
});

最后,处理 json 的 PHP。

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: Cannot read property 'length' of undefined 无论我使用什么示例。我尝试使用 jquery 3.0,并下载了最新的 jquery.ui,认为这可能是问题所在。我也尝试过恢复到旧版本来检查。

在这一点上,我确信我只是错过了一些东西。 3天有点荒谬,所以我寻求帮助。我知道堆栈上有类似的问题,是的,我都试过了。如果你还没有准备好猜到我对 jquery 不太好。我可以让其他一切工作,即使是 ajax 调用,但是,这个......

问候。

【问题讨论】:

    标签: php jquery ajax jquery-ui autocomplete


    【解决方案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 脚本似乎存在冲突。希望这会有所帮助...

    【讨论】:

    • 谢谢乔尔,我仍然有一些问题,因为我还不能显示列表。我会玩一会儿,看看我能想出什么。至少我不再有那个烦人的错误了,所以这是朝着正确方向迈出的一大步。我永远不会明白这一点。
    • 尝试以不同的结构对 JSON 响应进行编码。使用管道分隔单词可能不是一个好方法。继续……
    • 我将使用 JSON 响应,看看是否可以获得常规解析。我现在已经开始工作了。在等待 db 查询的帮助以及如何将数据传递给 PHP 时,我做了一些更改。这些改变失败了。您的赞赏。
    猜你喜欢
    • 2014-08-30
    • 2012-06-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-01
    • 1970-01-01
    相关资源
    最近更新 更多