Datalist polyfill (auto-complete) - Dynamic

Purpose

Demonstrates how to dynamically update the contents of the datalist element, based upon user input. Particularly useful where there are a large number of auto-complete suggestions.

Example

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

( function( $, wb ) {
"use strict";

var $document = wb.doc,
	pluginSelector = "#plugin",
	issueInput = $( "#issue" );

$document.on( "change", pluginSelector, function( event ) {
	var componentName = event.target.value;

	$( this ).trigger( {
		type: "ajax-fetch.wb",
		fetch: {
			url: encodeURI( "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Feature: " + componentName ),
			dataType: "json"
		}
	} );

	issueInput.get( 0 ).value = "";
} );

$document.on( "ajax-fetched.wb", pluginSelector, function( event ) {
	var dataList = $( "#" + issueInput.attr( "list" ) ),
		issues = wb.ielt10 ? event.fetch.response.data : event.fetch.response,
		lenIssues = issues.length,
		options = "",
		indIssue, issue;

	dataList.empty();

	for ( indIssue = 0; indIssue !== lenIssues; indIssue += 1 ) {
		issue = issues[ indIssue ];

		options += "<option label=\"" + issue.title + "\" value=\"" + issue.title + "\"></option>";
	}

	if ( wb.ielt10 ) {
		options = "<select>" + options + "</select>";
	}

	dataList.append( options );

	issueInput.trigger( "wb-update.wb-datalist" );
} );

} )( jQuery, wb );