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.12.1/themes/base/jquery-ui.css" rel
="Stylesheet"></link> <script src="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>
Best Answer
Here is the solution:
I have removed the library file, As the JS was conflicting.