"event is not defined" on Firefox

[GXBlary]

First, thanks for your great work!

I used the examples I found here to build an alternative to the advanced search form on my site/database. Everytime a new "tag" is selected in the search input, I fire a function [sendTags()] which fills the advanced search form properly then queries the database (so the advanced search form is the only true interface to my database query script).

Here is the code

var input = document.getElementById("mainSearchInput");
new Awesomplete(input, {
    list: tags,
    filter: function(text, input) {
        return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
    },

    item: function(text, input) {
        return Awesomplete.ITEM(text, input.match(/[^,]*$/)[0]);
    },
    replace: function(text) {
        var before = this.input.value.match(/^.+,\s*|/)[0];
        this.input.value = before + text + ", ";
    },
    minChars: 3
});
$("#mainSearchInput").on("awesomplete-selectcomplete", function(e){
    sendTags(event.text.value);
});

This works on Chrome 64, but on Firefox 58 I get the following error

ReferenceError: event is not defined 127.0.0.1:324:5

http://127.0.0.1/SpaTe/#:324:5 dispatch http://127.0.0.1/SpaTe/libs/jquery-3.2.1.min.js:3:10264 add/q.handle http://127.0.0.1/SpaTe/libs/jquery-3.2.1.min.js:3:8326 i.fire awesomplete.js:473:8 select awesomplete.js:273:4 mousedown awesomplete.js:105:6

I tried to replace

$("#mainSearchInput").on("awesomplete-selectcomplete", function(e){
    sendTags(event.text.value);
});

By

$("#mainSearchInput").on("awesomplete-selectcomplete", function(e){
    sendTags(event.text.value);
});

But it still doesn't work on Firefox

ReferenceError: event is not defined 127.0.0.1:322:5

http://127.0.0.1/SpaTe/#:322:5 i.fire awesomplete.js:473:8 select awesomplete.js:273:4 mousedown awesomplete.js:105:6

Can someone give me some tips so I can solve this problem?

Thanks a lot!

[vleontyev]

In your case issue is happening because you defined an event as e and then using it as event. This code should work for you:

$("#mainSearchInput").on("awesomplete-selectcomplete", function(e){
    sendTags(e.text.value);
});

Also you can bind to the event with vanilla JS (without jquery) like that:

document.getElementById('mainSearchInput').addEventListener("awesomplete-selectcomplete", function(event) {
    sendTags( event.text.value );
});

[GXBlary]

Thank you so much! Your vanilla JS works like a charm.