Extract the autocomplete out of the component.

[dhoko]

Hi,

I wish to use a custom list for the autocomplete (prevent an issue with an overflow), ex use case the autocomplete from gmail, the list is inside the body not next to the input.

Found a way to use another list (the list is not static):

const awesomplete = new Awesomplete(el[0].querySelector('input'), {
    minChars: 1,
    autoFirst: true,
    list: []
});

awesomplete.ul = $customList;

It works, but the lib won't do anything on click.

Found a way to patch it,

const id = setTimeout(() => {
    $.bind(this.ul, {"mousedown": function(evt) {
        var li = evt.target;
        if (li !== this) {
            while (li && !/li/i.test(li.nodeName)) {
                li = li.parentNode;
            }
            if (li && evt.button === 0) {  // Only 
select on left click
                evt.preventDefault();
                me.select(li, evt.target);
            }
        }
    }});
    clearTimeout(id);
}, 100);

Quick and dirty, but it's working.
Maybe using event delegation ? Or adding a option to set a custom ul as autocomplete list.

Then we need to update the CSS too, because with a custom style it works, but the default CSS won't work.

Edit: Found a better way to do it, cf PR.