php - Jquery ui autocomplete on multiple input fields with ajax results -


i trying several other people have accomplished here on stack. have tried of examples available , cannot seem work. i've copied working examples , reflected changes match case , still, nada.

html using looks 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 working source 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, php handle json.

case "fetchall": {          $query = $db->rawquery("select itemid, item_name, item_sku items order item_name asc");         if($query) {             $data = array();             foreach($query $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 uncaught typeerror: cannot read property 'length' of undefined no matter example use. i've tried using jquery 3.0, , downloaded latest jquery.ui thinking that may problem. i've tried reverting older versions check that.

i convinced @ point missing something. 3 days bit ridiculous asking help. know there similar questions on stack , yes, have tried them all. if you've not ready guessed not jquery. can else work ajax calls, but, this...

regards.

clhardman:

try use following script inclusion in 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 scenario, seems have conflicts jquery scripts. hope helps...


Comments