- Skip to main content
- Skip to "About this site"

# Datalist polyfill (auto-complete) - Dynamic

- Documentation
- Questions or comments?

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

Select an issues
Plugin
Issue
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:
  2014-07-20