# Correctif « datalist » (saisie automatique) - Dynamique

- Documentation
- Questions ou commentaires?

## But

Montre comment mettre à jour de façon dynamique le contenu de l'élément « `datalist` », sur la base de l'entrée utilisateur. Particulièrement utile où il ya un grand nombre de suggestions de saisie semi-automatique.

## Exemple

Choisir un bogue ou problême
Plugiciel:
Bogue ou problême:
Visualiser le code

### HTML

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

### JavaScript

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

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

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

    	$document.trigger({
    		type: "ajax-fetch.wb",
    		element: this,
    		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 de modification :
  2014-07-20