查看/编辑 代码
内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Demo auto complete </title> <script type="text/javascript"> window.addEventListener("load", function(){ // Add a keyup event listener to our input element var name_input = document.getElementById('name_input'); name_input.addEventListener("keyup", function(event){hinter(event)}); // create one global XHR object // so we can abort old requests when a new one is make window.hinterXHR = new XMLHttpRequest(); }); // Autocomplete for form function hinter(event) { // retireve the input element var input = event.target; // retrieve the datalist element var huge_list = document.getElementById('huge_list'); // minimum number of characters before we start to generate suggestions var min_characters = 0; if (input.value.length < min_characters ) { return; } else { // abort any pending requests window.hinterXHR.abort(); window.hinterXHR.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // We're expecting a json response so we convert it to an object var response = JSON.parse( this.responseText ); // clear any previously loaded options in the datalist huge_list.innerHTML = ""; response.forEach(function(item) { // Create a new <option> element. var option = document.createElement('option'); option.value = item; // attach the option to the datalist element huge_list.appendChild(option); }); } }; window.hinterXHR.open("GET", "/test.php?query=" + input.value, true); window.hinterXHR.send() } } </script> </head> <body> <h2>The form</h2> <form> <input type="text" name="name" id="name_input" list="huge_list">Name <datalist id="huge_list"> </datalist> <br/> <input type="submit"> </form> </body> </html>