Initialize Javascript Select2 controler using HTML5 data-* attributes : i'm trying to manage [select2 library][1] in order to augment the capabilties of natives select html controls.

According to the official documentation (very compressed) it says that  for using select2 you only need to download they css and javascript files and that is (and also, implicity assumed, that you need Jquery).

So, there is a way of initizaliting select using [HTML5 data attributes][2]... but i am not getting it, i'm trying to follow their example.... perpahs i am missing some important note here... hope anyone can help me on this.

Here is the HTML i am trying to do

    <!DOCTYPE html>
    <html>
    
      <head>
    	  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    	  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    	  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
      </head>
    
      <body>
        <h1>Hello Select2</h1>
      <div>
          <select multiple id="a_select" data-tags="true" data-placeholder="Select an option" data-allow-clear="true" style="width:100%">
            <option value="AL">Alabama</option>
            <option value="WY">Wyoming</option>
          </select>
      </div> 
    
      </body>
    
    </html>

Also a link to plunker, to have a live example ready to go. https://plnkr.co/edit/Xk101K3sowAYQwbRCFez?p=preview

Thanks.


P.D: I can archieve the desired result thought javascript, but is quite annoying to don't know what is not working when i just followed the example on the oficial site.

  [1]: https://select2.github.io/
  [2]: https://select2.github.io/options.html#data-attributes