JSFiddle - React, Tailwind, and code Playground
by andyw_
HTML
<input type="text" value="" id="autosuggest">
JavaScript
xmlHttpReq = function() {
this.sendRequest = function sendRequest(url, callback, postData) {
var req = this.createXMLHTTPObject();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method, url, true);
//req.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
//if (postData) req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.onreadystatechange = function() {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
// alert('HTTP error ' + req.status);
return;
}
callback(req);
};
if (req.readyState == 4) return;
req.send(postData);
};
var XMLHttpFactories = [
function() {
return new XMLHttpRequest()},
function() {
return new ActiveXObject("Msxml2.XMLHTTP")},
function() {
return new ActiveXObject("Msxml3.XMLHTTP")},
function() {
return new ActiveXObject("Microsoft.XMLHTTP")}
];
this.createXMLHTTPObject = function createXMLHTTPObject() {
var xmlhttp = false;
for (var i = 0; i < XMLHttpFactories.length; i++) {
try {
xmlhttp = XMLHttpFactories[i]();
}
catch (e) {
continue;
}
break;
}
return xmlhttp;
};
};
function autoSuggest(args) {
//private members
var xmlHttpReqObj = new xmlHttpReq();
var suggestions = {}; //keep track of the suggestions that come in
var listeners = {}; //keep a reference to the listeners that we add so we can remove them later if needed
//the arguments
var options = {
//If the server does not automatically highlight the matching result (string or regex) with <b> tags
//you can use a JavaScript based highlighter here that highlights the matching result to the...