Added an example of dynamic datalist

Addresses #4627

src/polyfills/datalist/datalist-dynamic-en.hbs

@@ -0,0 +1,40 @@
+---
+{
+	"title": "Datalist polyfill (auto-complete) - Dynamic",
+	"language": "en",
+	"category": "Polyfills",
+	"description": "Adds auto-complete functionality to specific <input> fields by dynamically displaying a list of words that match the <datalist>.",
+	"tag": "datalist",
+	"parentdir": "datalist",
+	"altLangPrefix": "datalist-dynamic",
+	"js": ["demo/datalist_dynamic"],
+	"dateModified": "2014-06-19"
+}
+---
+<p>The <code>datalist</code> tag specifies a list of pre-defined options for an <code>input</code> element.</p>
+
+<!-- Start of Datalist content -->
+<section>
+	<h2>Example</h2>
+	<form action="#" method="get">
+		<fieldset>
+			<legend>Select an issues</legend>
+			<div class="form-group">
+				<label for="plugin">Plugin</label>
+				<select class="form-control" id="plugin" name="plugin">
+					<option label="Select a plugin"> </option>
+					<option value="Multimedia player">Multimedia Player</option>
+					<option value="Lightbox">Lightbox</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label for="issue">Issue</label>
+				<input class="form-control" type="text" id="issue" name="issue" list="issues" />
+			</div>
+			<datalist id="issues">
+				<!--[if lte IE 9]><select><![endif]-->
+				<!--[if lte IE 9]></select><![endif]-->
+			</datalist>
+		</fieldset>
+	</form>
+</section>

src/polyfills/datalist/datalist-dynamic-fr.hbs

@@ -0,0 +1,40 @@
+---
+{
+	"title": "Correctif « datalist » (saisie automatique) - Dynamique",
+	"language": "fr",
+	"category": "Polyfills",
+	"description": "Émule l'attribut list de l'élément <inputs>, ainsi que l'élément <datalist>, pour les navigateurs qui ne les supportent pas.",
+	"tag": "datalist",
+	"parentdir": "datalist",
+	"altLangPrefix": "datalist-dynamic",
+	"js": ["demo/datalist_dynamic"],
+	"dateModified": "2014-06-19"
+}
+---
+<p>La balise <code lang="en">datalist</code> spécifie une liste d'options pré-définis pour un élément <code lang="en">input</code>.</p>
+
+<!-- Start of Datalist content -->
+<section>
+	<h2>Exemple</h2>
+	<form action="#" method="get">
+		<fieldset>
+			<legend>Choisir un bogue ou problême</legend>
+			<div class="form-group">
+				<label for="plugin">Plugiciel:</label>
+				<select class="form-control" id="plugin" name="plugin">
+					<option label="Choisir un plugiciel"> </option>
+					<option value="Multimedia player">Lecteur multimédia</option>
+					<option value="Lightbox" lang="en">Lightbox</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label for="issue">Bogue ou problême:</label>
+				<input class="form-control" type="text" id="issue" name="issue" list="issues" />
+			</div>
+			<datalist id="issues" lang="en">
+				<!--[if lte IE 9]><select><![endif]-->
+				<!--[if lte IE 9]></select><![endif]-->
+			</datalist>
+		</fieldset>
+	</form>
+</section>

src/polyfills/datalist/demo/datalist_dynamic.js

@@ -0,0 +1,41 @@
+/*
+ * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
+ * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ */
+(function( $, document, wb ) {
+"use strict";
+
+var $document = wb.doc,
+	pluginSelector = "#plugin",
+	dataList = $( "#issues" );
+
+$document.on( "change", pluginSelector, function( event ) {
+	var pluginName = event.target.value;
+
+	$document.trigger({
+		type: "ajax-fetch.wb",
+		element: this,
+		fetch: encodeURI("https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Plugin: " + pluginName)
+	});
+});
+
+$document.on( "ajax-fetched.wb", pluginSelector, function( event ) {
+	var issues = JSON.parse(event.response),
+		lenIssues = issues.length,
+		indIssue, issue;
+
+	dataList.empty();
+
+	dataList.append( "<!--[if lte IE 9]><select><![endif]-->" );
+
+	for ( indIssue = 0; indIssue < lenIssues; indIssue++ ) {
+		issue = issues[ indIssue ];
+		window.console.log( issue );
+		dataList.append( "<option value=\"" + issue.id + "\">" + issue.title + "</option>" );
+	}
+
+	dataList.append( "<!--[if lte IE 9]></select><![endif]-->" );
+	dataList.trigger( "wb-update.wb-datalist" );
+});
+
+})( jQuery, document, wb );