0

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>
5
  • Did you get any solution for this issue?
    – Ronak
    Commented Aug 5, 2019 at 9:04
  • Yes, I have solved this.
    – Amy
    Commented Aug 5, 2019 at 9:59
  • Can you please let me know how did you solve this? I'm getting the same error.
    – Ronak
    Commented Aug 5, 2019 at 10:02
  • I have updated the solution.
    – Amy
    Commented Aug 5, 2019 at 10:13
  • In my case, I have removed the library file, As JS was conflicting.
    – Amy
    Commented Aug 5, 2019 at 10:13

1 Answer 1

0

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.

3
  • So how did you remove the library file?
    – Ronak
    Commented Aug 5, 2019 at 10:41
  • I guess you have used the default jquery-ui file.
    – Ronak
    Commented Aug 5, 2019 at 10:43
  • 1
    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>
    – Amy
    Commented Aug 5, 2019 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.