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
View code
HTML
<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>
JavaScript
(function( $, wb ) {
"use strict";
var $document = wb.doc,
pluginSelector = "#plugin",
issueInput = $( "#issue" );
$document.on( "change", pluginSelector, function( event ) {
var pluginName = event.target.value;
$( this ).trigger({
type: "ajax-fetch.wb",
fetch: {
url: encodeURI( "https://api.github.com/repos/wet-boew/wet-boew/issues?labels=Plugin: " + pluginName ),
dataType: wb.ielt10 ? "jsonp" : "json",
jsonp: wb.ielt10 ? "callback" : null
}
});
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 );
- Date modified: