How to solve jQuery autocomplete is not a function in Magento2.2.5

Question

Here is my script, I don't know what is the problem but it show JQuery autocomplete is not a function in console.

Any help would be appreciated.

<link href="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> <script>
 <?php 
 $zipdata = array();
 $zipval = array();
 $zipdt = array();
 foreach ($storeCollection as $key => $value){ 
 if ($value['latitude']==0 || $value['longitude']==0){
 continue; 
 } 
 $lab = $value['name'].', '.$value['city'].', '.$value['state_province'].', '.$value['postal_code'];
 $zipdata[] = $lab;
 $val = $value["location_id"];
 $zipval[] = $val;
 //$zipdt[] = {"value":$val ,"label": $lab};
 } 
 if(count($zipdata) > 0){ ?>
 require(['jquery', 'jquery/ui'], function($){ 
 jQuery(document).ready(function(){
 var zipdata = <?php echo json_encode($zipdata); ?> ;
 var zipval = <?php echo json_encode($zipval); ?> ;
 var i;
 var zipdt = Array();
 for (i = 0; i < zipval.length; i++) { 
 zipdt[i] = {"value": zipdata[i] ,"id": zipval[i]};
 }
 //console.log('zipdt',zipdt);
 jQuery( "#retailer" ).autocomplete({
 source: zipdt,
 select: function (event, ui) {
 var value = ui.item.value;
 var label = ui.item.id;
 jQuery("#retailerid").val(label);
 },
 change: function(event, ui) {
 if((ui.item === null)){
 jQuery("#retailer").val("");
 }
 }, 
 });
 });
 });
 <?php } ?> </script>

• Ronak: Did you get any solution for this issue?
• Amy: Yes, I have solved this.
• Ronak: Can you please let me know how did you solve this? I'm getting the same error.
• Amy: I have updated the solution.
• Amy: In my case, I have removed the library file, As JS was conflicting.

Answer 1

Here is the solution:

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel ="Stylesheet">
<script>
 <?php 
 $zipdata = array();
 $zipval = array();
 $zipdt = array();
 foreach ($storeCollection as $key => $value){ 
 if ($value['lat']==0 || $value['lon']==0){
 continue; 
 } 
 $lab = $value['name'].', '.$value['city'].', '.$value['state'].', '.$value['zip'];
 $zipdata[] = $lab;
 $val = $value["store_id"];
 $zipval[] = $val;
 //$zipdt[] = {"value":$val ,"label": $lab};
 } 
 if(count($zipdata) > 0){ ?>
 require(['jquery', 'jquery/ui'], function($){
 jQuery(document).ready(function(){
 var zipdata = <?php echo json_encode($zipdata); ?> ;
 var zipval = <?php echo json_encode($zipval); ?> ;
 var i;
 var zipdt = Array();
 for (i = 0; i < zipval.length; i++) { 
 zipdt[i] = {"value": zipdata[i] ,"id": zipval[i]};
 }
 //console.log('zipdt',zipdt);
 jQuery( "#retailer" ).autocomplete({
 source: zipdt,
 //delay: 300,
 select: function (event, ui) {
 var value = ui.item.value;
 var label = ui.item.id;
 jQuery("#retailerid").val(label);
 },
 change: function(event, ui) {
 if((ui.item === null)){
 jQuery("#retailer").val("");
 }
 }, 
 });
 });
 });
 <?php } ?>
</script>

I have removed the library file, As the JS was conflicting.

• Ronak: So how did you remove the library file?
• Ronak: I guess you have used the default jquery-ui file.
• Amy: I have used require(['jquery', 'jquery/ui'], function($){ instead of using <script src="code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> <script>