"ajax"
Bootstrap 3.3.0 Snippet by prabhatmech

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> <div class="row" id="page-wrapper"> <h1>Datalist Element Demo</h1> <label for="default">Pick a programming language</label> <input type="text" id="default" list="languages" placeholder="e.g. JavaScript"> <datalist id="languages"> <option value="HTML"> <option value="CSS"> <option value="JavaScript"> <option value="Java"> <option value="Ruby"> <option value="PHP"> <option value="Go"> <option value="Erlang"> <option value="Python"> <option value="C"> <option value="C#"> <option value="C++"> </datalist> </div> </div>
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: Helvetica, Arial, sans-serif; font-size: 100%; background: #333; -webkit-font-smoothing: antialiased; } #page-wrapper { width: 640px; background: #FFFFFF; padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,0.8); } h1 { margin-top: 0; } label { display: block; margin-top: 2em; margin-bottom: 0.5em; color: #999999; } input { width: 100%; padding: 0.5em 0.5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #D9D9D9; } button { display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.5rem 0.8em; background: #69c773; border-bottom: 1px solid #498b50; color: white; -webkit-font-smoothing: antialiased; font-weight: bold; margin: 0; width: 100%; text-align: center; } button:hover, button:focus { opacity: 0.75; cursor: pointer; } button:active { opacity: 1; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset; }
// Get the <datalist> and <input> elements. var dataList = document.getElementById('json-datalist'); var input = document.getElementById('ajax'); // Create a new XMLHttpRequest. var request = new XMLHttpRequest(); // Handle state changes for the request. request.onreadystatechange = function(response) { if (request.readyState === 4) { if (request.status === 200) { // Parse the JSON var jsonOptions = JSON.parse(request.responseText); // Loop over the JSON array. jsonOptions.forEach(function(item) { // Create a new <option> element. var option = document.createElement('option'); // Set the value using the item in the JSON array. option.value = item; // Add the <option> element to the <datalist>. dataList.appendChild(option); }); // Update the placeholder text. input.placeholder = "e.g. datalist"; } else { // An error occured :( input.placeholder = "Couldn't load datalist options :("; } } }; // Update the placeholder text. input.placeholder = "Loading options..."; // Set up and make the request. request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true); request.send();

Related: See More


Questions / Comments: