How to use new JavaScriptSupport require in 5.4

[George Christman]

Hello everyone, I'm trying to familiarize myself with some of t5.4. I've
been trying to build a sample mixin based off from the Tap autocomplete,
but seem to have stumbled on JavaScriptSupport require. I'm not sure how to
import my custom js and call the initialize method while still being able
to pass in my json parameters.

What I've tried.

.class

@Import(library="context:js/custom-autocomplete.js")
public class CustomAutocomplete {

@Environmental
    private JavaScriptSupport jsSupport;

void afterRender() {
        Link link = resources.createEventLink(EVENT_NAME);

        JSONObject spec = new JSONObject("id", field.getClientId(),
                "url", link.toString()).put("minChars", minChars);

        jsSupport.require("js/custom-autocomplete").with(spec);
    }


.js

define(["./dom", "./ajax", "jquery", "bootstrap"], function(dom, ajax, $) {
    var doLookup, exports, init;
    doLookup = function($field, url, query, process) {
        $field.addClass("ajax-wait");
        return ajax(url, {
            parameters: {
                "t:input": query
            },
            success: function(response) {
                $field.removeClass("ajax-wait");
                return process(response.json.matches);
            }
        });
    };
    init = function(spec) {
        var $field;
        $field = $(document.getElementById(spec.id));
        return $field.typeahead({
            minLength: spec.minChars,
            source: function(query, process) {
                doLookup($field, spec.url, query, process);
            }
        });
    };
    return exports = init;
}

I receive the following error.

"NetworkError: 404 /asset.gz/module/js/custom-autocomplete.js -
http://localhost:8080/TapDemo/asset.gz/module/js/custom-autocomplete.js";

Could someone help me to understand what I'm may be doing wrong? Thanks.