Support of <select>

[ionas]

I'd love to see an easy support where I'd simply have to hand over a class or id for some selects and the option values are being turned into values you can type ahead (think chosen jquery library, but without jquery). Any sane way to do it right now? Adding css requirements won't be a problem (I could even supply and PR those back).

[vlazar]

Separate label/value is landed #16866
It is also possible to initialize list with separate label/value via <datalist> or <ul>.

Read about different label and value at the end of Basic usage section and about new data method at the end of Extend section.

[vlazar]

A select-like functionality can be implemented as simple as:

<input id="myinput-hidden" name="lang" type="hidden" />
<input id="myinput" />

var hidden = $("#myinput-hidden");

new Awesomplete("#myinput", {
    list: [["Ada", 1], ["Java", 2], ["JavaScript", 3], ["Brainfuck", 4], ["LOLCODE", 5], ["Node.js", 6], ["Ruby on Rails", 7]],

    // the only function you need to override:
    replace: function(suggestion) {
        this.input.value = suggestion.label; // default replace() inserts suggestion.value to input
        hidden.value = suggestion.value;
    }
});

[LeaVerou]

Actually, once we add native <datalist> support with different key/values, it will be trivial to also add support for <select> and I think it might be worth it to support this out of the box, without the users having to deal with JS. They would have to provide the input themselves though, and link it to a select menu just like they link to a datalist today.

[vlazar]

The <datalist> already supports different key/values, as well as any other elements like <select>.

The only thing is that <select> element won't be hidden, and default replace method won't update original <select> element with selected value.

[vlazar]

Here is how to use <select> and update it when the value is selected:

<input id="sel" list="numbers" />
<select id="numbers">
    <option value="1">Number One</option>
    <option value="2">Number Two</option>
    <option value="3">Number Three</option>
</select

new Awesomplete("#sel", {
    replace: function(suggestion) {
        $("#numbers").value = suggestion.value; // set <select> value, e.g. "2"
        this.input.value = suggestion.label;    // set input value, e.g. "Number Two"
    }
});

[LeaVerou]

My impression was that they wanted to use an Awesomplete widget as a select menu (i.e. the user has to pick one of the options, they cannot type their own), not that they wanted to also update the select menu with the selected option. In any case, as long as we support the former, the latter is just a matter of an event listener.