
<form method="get" action="" > <input type="search" name="q" value="<?= $q; ?>" list="json-datalist" id="i_search" autocomplete="off" /> <input type="submit" value="  " /> </form> <datalist id="json-datalist"></datalist>  //   <datalist>  <input> var dataList = document.getElementById('json-datalist'); var input = document.getElementById('i_search'); //   XMLHttpRequest. var request = new XMLHttpRequest(); //   . request.onreadystatechange = function(response) { if (request.readyState === 4) { if (request.status === 200) { var jsonOptions = JSON.parse(request.responseText); // Parse the JSON //   JSON jsonOptions.forEach(function(item) { var option = document.createElement('option'); //       json-. option.value = decodeURIComponent(unescape(item)); //    <option>  <datalist>. dataList.appendChild(option); }); input.placeholder = "Please type"; } else { //    input.placeholder = "Couldn't load datalist"; } } }; //   input.placeholder = "Loading options..."; //     request.open('GET', URL_BASE+'/data.json', true); request.send();   request.open('GET', URL_BASE+'/data.json', true);   request.onreadystatechange = updatePage;  var dataList = document.getElementById('json-datalist'); var input = document.getElementById('i_search'); var url = URL_BASE + '/data.json'; var request = null; if(window.XMLHttpRequest) request = new XMLHttpRequest(); else if (window.ActiveXObject) request = new ActiveXObject(Microsoft.XMLHTTP); function updatePage() { if (request.readyState == 4) if (request.status == 200) { var jsonOptions = JSON.parse(request.responseText); jsonOptions.forEach(function(item) { var option = document.createElement('option'); option.value = item; dataList.appendChild(option); }); input.placeholder = "Please type"; delete request; } else { input.placeholder = "Couldn't load datalist"; } } request = getXmlHttp(); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); Source: https://habr.com/ru/post/254437/
All Articles