Custom class

[Andre741]

Pretty straightforward, giving the option for own classes for the wrapper.

Eq.

 var input = document.getElementById("rp-input-activities");
        new Awesomplete(input, {
            minChars: 0,
            autoFirst: true,
            list: list,
            class: "rp-input-activities-awesomplete"
        });

Code changes:
First [21-30]

    configure(this, {
        minChars: 2,
        maxItems: 10,
        autoFirst: false,
        filter: _.FILTER_CONTAINS,
        sort: _.SORT_BYLENGTH,
        item: _.ITEM,
        replace: _.REPLACE,
                **class: ""**
    }, o);

second [34-39]

    // Create necessary elements

    this.container = $.create("div", {
        className: this.class + " awesomplete",
        around: input
    });

[LeaVerou]

This seems to be a very special case. If someone wants to add an attribute instead of a class do we create another config option?
I’d rather handle this in a generic way, e.g. perhaps via an event or method called on these inputs.

[TxHawks]

I have to say, I do think there is merit in allowing users to use their own classes, mostly for integrating with an existing design system. #16805 is a long standing PR on this.

[LeaVerou]

I didn’t say it shouldn’t be allowed, I just said I'd be more interested in a generic way that also allows them to add attributes etc.

[Andre741]

In contrast to a data attribute (or something else) a custom class is, at least in my opinion, a more common case.

[fractaledmind]

Once we make Bliss a dependency, we could allow an object to be passed to an container property, which would get passed down to Bliss.set. This would be the cleanest, most flexible solution IMO.

[fractaledmind]

Here's my implementation, using Bliss:

this.container = this.container['subject'] && this.container.subject instanceof Element ?
    Bliss.set(this.container.subject,
              Bliss.extend(
                {className: "awesomplete"},
                o.container,
                /^(?!subject)/)) :
    Bliss.create("div",
                 Bliss.extend(
                  {className: "awesomplete", around: this.input},
                  o.container)
);

This allows you to pass a container option when you initialize Awesomplete which is an object allowing for all of the flexibility of Bliss.set, in addition to the subject key, which allows you to point to a pre-existing element in the DOM.

Here's a simple example:

new Awesomplete(input, {
  list: ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"],
  container: {subject: document.getElementById('picker-wrapper'), className: "awesomeplete-wrapper"}
});