Uncaught TypeError: jQuery(…).autoComplete is not a function error

I have two pages that autocomplete a brand name field and both are almost identical in respect to this function. However one works, autocompleting entries as expected. And the other doesn’t autocorrect. It gets an error as follows:

codebase.core.min.js:6 Uncaught TypeError: jQuery(...).autoComplete is not a function
    at Function.initAutoComplete (brand_list.js:23:34)
    at Function.init (brand_list.js:45:14)
    at HTMLDocument.<anonymous> (brand_list.js:50:26)
    at e (codebase.core.min.js:6:29178)
    at t (codebase.core.min.js:6:29480)

I find it hard to understand how there could be an error with brand_list.js when the same function is called by another program and works perfectly.

Both use the same get_js statement:

    <?php $cb->get_js('_es6/pages/brand_list.js'); ?>

brand_list.js is as follows:

class BrandList {

static initAutoComplete() {
        var brands = [];
            jQuery.ajax({
                url: "./ajax/ajaxFetchBrands.php",
                type: 'post',
                dataType: "json",           
                success: function( data ) {
                    for (var i = 0; i < data.length; i++) {
                    brands.push(data[i].brand_name);
                }
            }
        });
       
        // Init autocomplete functionality
        jQuery('.js-autocompletebrand').autoComplete({

            minChars: 1,
            source: function(term, suggest){
                term = term.toLowerCase();

                let brandsList  = brands;
                let suggestions    = [];
                alert(brandsList.length);
                for (var i = 0; i < brandsList.length; i++) {
                    if (~ brandsList[i].toLowerCase().indexOf(term)) suggestions.push(brandsList[i]);
                }

                suggest(suggestions);
            }
        });
        }

        /*
         * Init functionality
         *
         */
        static init() {
            this.initAutoComplete();
        }
    }

    // Initialize when page loads
    jQuery(() => { BrandList.init(); });

I’ve debuged the ajax script and it is correctly picking up the data to pass back.

The script is as follows:

<?php
ob_start();
session_start();
require '../inc/_global/db_con.php';

//$debugnote = "================================ AJAX FETCH BRANDS ====================================================";
//$query = mysqli_query($con, "insert into debug (note, created_at) values ('$debugnote', NOW())") or die(mysqli_error($con));      

$store_id = $_SESSION['store_id'];

$query = "SELECT * FROM brands WHERE store_id = '$store_id' AND accepted=1";
$result = mysqli_query($con,$query);

$response = array();
while($row = mysqli_fetch_array($result) ){
   $response[] = array("brand_name"=>$row['brand_name']);
}


echo json_encode($response);
?>

Below is the script that doesn’t work, the section defining the field:

<div class="form-group row">
    <div class="col-md-8">
        <label for="brand">Brand<span class="text-danger"> *</span></label>
        <div class="form-group">
            <div class="input-group">
                <input onClick="this.setSelectionRange(0, this.value.length);" type="text" 
                        class="js-autocompletebrand form-control uc_brand" id="filter_by_brand" name="filter_by_brand"
                        value="<?php echo $brand_name; ?>" placeholder="Enter brand name ...">
                <div class="input-group-append">
                    <button type="submit" class="btn btn-secondary">
                        <i class="fa fa-search"></i>
                    </button>
                    <?php if (((!empty($_POST['filter_by_brand'])) && (!empty($brand_id))) || 
                            ($brand_name == 'UNBRANDED')) { ?>
                        <span style="margin-left: 20px" class="font-size-h2 font-w700 text-success">
                            <i class="fa fa-check"></i>
                        </span>
                    <?php } ?>
                </div>
            </div>
        </div>                

    </div>
    <div class="col-md-12">                         
        <input type="hidden" class="form-control form-control-lg" id="brand-name" name="brand-name" value="<?php echo $brand_name; ?>">
        <span class="text-danger"  id="brand-err"></span>
    </div>
</div>

The above piece of code is the only one that differs from the other script, which works so I presume that this is the problem, not the js script itself. But I can’t find a fault with it.
Any help appreciated.