CLHardman CLHardman - 3 months ago 61
Ajax Question

Jquery ui autocomplete on multiple input fields with ajax results

I am trying to do what several other people have accomplished here on stack. I have tried all of the examples available and cannot seem to get this to work. I've copied working examples and reflected changes to match my case and still, nada.

HTML I am using looks like this.

<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 I've gotten from a working source to demo

//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();
}
});
});


lastly, the PHP to handle the 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;


I constantly get the Uncaught TypeError: Cannot read property 'length' of undefined no matter what example I use. I've tried using the jquery 3.0, and downloaded the latest jquery.ui thinking that that may be the problem. I've also tried reverting back to older versions to check that.

I am convinced at this point that I am simply missing something. 3 days is a bit ridiculous so I am asking for help. I know there are similar questions on stack and yes, I have tried them all. If you've not all ready guessed I am not too good with jquery. I can get everything else to work even ajax calls, but, this...

Regards.

Answer

CLHardman:

Try to use the following script inclusion in your head section:

Html file:

<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>

I couldn't replicate your scenario, but it seems you have conflicts with your jquery scripts. Hope this helps...

Comments