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

  • So how did you remove the library file? – Ronak Aug 5 '19 at 10:41
  • I guess you have used the default jquery-ui file. – Ronak Aug 5 '19 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 Aug 5 '19 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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