Capability to differentiate value from displayed text

Your library is cool but maybe due to the habit of <select><option> couple for sending identifier, I would like to use a value that differs from the text when event ‘awesomplete-selectcomplete’ is fired. Another reason could be the fact, that I want to avoid encoding issue. With accents (I’m French), I don’t want to bother about encoding client/server when sending info (although nowadays, everyone use UTF-8, in my dreams…) so an identifier is better IMO.

I don’t know if it’s a design choice but I didn’t see any ways to achieve it. To try to bypass the lib behaviour cleanly, I created the following example below

<input id="myinput" list="mylist" />
<datalist id="mylist">
    <option value="a">Ada</option>
    <option value="b">Java</option>
    <option value="c">JavaScript</option>
    <option value="d">Brainfuck</option>
    <option value="e">LOLCODE</option>
    <option value="f">Node.js</option>
    <option value="g">Ruby on Rails</option>
</datalist>

<script>
document.querySelector('#myinput').addEventListener('awesomplete-selectcomplete', function(evt){
  console.log(this.value);
})
</script>

Unfortunately, it echoed Python but never a when choosing the first option.

I could always do the below really dirty solution but I would prefer to avoid it.

What is the way to go for my requirements if any? Thanks for your input.

document.querySelector('#myinput').addEventListener('awesomplete-selectcomplete', function(evt) {
  var lib = this.value;
  var val = Array.prototype.slice.call(document.querySelectorAll('#mylist option')).filter(function(option) {
    if (option.text == lib) {
      return true;
    };
    return false;
  })[0].value;
  console.log(lib, val);
});

[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]

To everyone interested in differentiating value from displayed text, aka key/value feature, aka array of objects feature.

The code is ready and it’s almost 100% backward compatible. To ensure everything working fine for you we need your help with testing it in the wild before it’s released. See this PR: Separate label/value for each suggestion in list