Magento2 jQuery Autocomplete Not a Function – How to Solve

autocompletejquerymagento2

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:

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

Related Topic