How to create External data-source in html5

Question

In html5 the input field has the following format

 <input type='text', data-provide= "typeahead", data-items="4",
 autocomplete="off",  data-source='["Business and Commercial Laws",
 "Consumer Laws", "Criminal Laws"]', name='userInputName',
 placeholder='Court of practice'> Data </input>

How do i create link the above tag with a data-source which is not inline, but external. I ultimately want to re-use the data-source.

Edit: I am using the typeahead plugin in bootstrap. I am programming in node.js framework. So i can use

- var ArrayVar = [ "this", "that", "here"]

 data-source='#{ArrayVar}' 

But the above converts array ArrayVar into a string "this, that, here" which is not desired, as the data-source should be an array.

Answer 1

Data attributes can be retrived with jQuery.

$('[data-source']).each(function(){ // select all elements with the data-source attribute
    var $this = $(this), source = $this.data("source");

    // update the source
    $this.data("source", sourceToArray(source));
});

Fitting this into a framework might be difficult, so I suggest choosing an unused attribute, or making sure that this code fires before AngularJS is loaded.