<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