Two different constructors? autoComplete.js versus npm @tarekraafat/autocomplete.js

[meekrob]

I'm using v10.2.7 for everything...

I have autocomplete working in a simple script that uses a downloaded autoComplete.js directly. I want to use the same code in an app with dependencies managed by npm, and bundled by grunt.

However, the initializer in my direct (working) version:

<script src="js/autoComplete.js"></script>
<script>
const autoCompleteJS = new autoComplete( autocomplete_config );
</script>

which calls the following constructor on line 614 in autoComplete.js:

function autoComplete(config) {
    this.options = config;
    this.id = autoComplete.instances = (autoComplete.instances || 0) + 1;
    this.name = "autoComplete";
   ...

Does not work in my bundled app:

var autoComplete = require('autocomplete.js');
const autoCompleteJS = new autoComplete( autocomplete_config );

because it appears to call a completely different constructor in autocomplete.js/src/standalone/index.js:

function autocomplete(selector, options, datasets, typeaheadObject) {
  datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 2); 

  var inputs = zepto(selector).each(function(i, input) {
    var $input = zepto(input);
    var eventBus = new EventBus({el: $input});
    var typeahead = typeaheadObject || new Typeahead({
      input: $input,
      eventBus: eventBus,
      dropdownMenuContainer: options.dropdownMenuContainer,
...

The javascript console chokes on options being null.

I can't find a corresponding function autoComplete(config) in the npm version. What am I missing? All of the usage examples on https://tarekraafat.github.io/autoComplete.js show code that expects a single config object for the constructor.

I'd love to use this package- it's so sleek! Thanks in advance!!!

In both cases, my config objection (autocomplete_config) is:

autocomplete_config = {
    selector: "#autoComplete",
    placeHolder: "Gene name ...",
    data: {
        keys: ["GENE_NAME"],
        src: async (query) => {
          try {
            // Fetch Data from external Source
            var url = `geneNames.php?GENE_NAME=${query}`;
            console.log(url);
            const source = await fetch(url, {cache: "default", mode: "cors"});
            // Data should be an array of `Objects` or `Strings`
            const data = await source.json();
            console.log(data);
            return data;
          } catch (error) {
            return error;
          }
        },
    },
    query: (input) => {
        console.log(input);
        return input;
    },
    threshold: 3,
    debounce: 500,
    submit: true,
    cache: true,
    resultItem: {
        highlight: true,
    },
    events: {
        input: {
            selection: (event) => {
                console.log(event.detail.selection.value.GENE_NAME);
                const selection = event.detail.selection.value.GENE_NAME;
                autoCompleteJS.input.value = selection;
            }
        }
    }
};