searchSuggest
The search suggest function that I built for my previous portfolio site is a quick demonstration of timers, stopping timers, objects, events and AJAX. It has one dependent function that’s called ‘findPos’ which I found on quirksmode – it’s a cross-browser function that finds and returns the position of an element.
<div id="searchbox">
<form action="?s=search" method="get" name="search">
<input type="text" name="keywords" id="keywords">
</form>
<div id="keywordsuggestions" style="display:none;position:absolute;top:0px;left:0px;"></div>
</div>
<script>
var kwsug_url = 'http://jeaster.net/index.php?s=search&ajax=1&keywords=';
var kwsug_timer = "";
var kwsug_kw = "";
var searchSuggest = ({
setup: function () {
df = document.forms; if (!df||!df.search) return;
kwsug = document.getElementById("keywordsuggestions");
kw = df.search.keywords;
if (!kwsug||!kwsug.style) return;
if (typeof kw.onkeyup != "function") {
kw.onblur = function () {setTimeout("kwsug.style.display='none'",100);};
kw.onkeyup = function () {searchSuggest.setup();};
kw.onclick = function () {searchSuggest.setup();kwsug.style.display="";};
}
else {
if (kw.value == '') {
kwsug.style.display="none";
}
else {
if (kwsug_kw != kw.value) {
if (kwsug_timer != "") clearTimeout(kwsug_timer);
kwsug_timer = setTimeout("searchSuggest.send('"+kw.value+"')",200);
kwsug_kw = kw.value;
}
}
return;
}
},
send: function (str) {
if (str.length >= 1) {
var url = kwsug_url+encodeURI(str);
if (window.location.protocol == 'https:') url = url.replace(/^http:/,'https:');
xmlHttp=this.GetXmlHttpObject(this.stateChanged);
if (!xmlHttp) return;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
},
stateChanged: function () {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
kwsug.innerHTML="";
kwsug.style.display="none";
if (xmlHttp.responseText) {
response = xmlHttp.responseText;
if (response.search(/<keyword_suggest>/) != -1) {
if (kw.value=='') return;
response = response.replace(/<keyword_suggest>|<\/keyword_suggest>/,'');
if (response.search(/href/) != -1) {
kwsug.innerHTML=response
kwpos = findPos(kw)
kwsug.style.left = kwpos[0]+'px';
kwsug.style.top = kwpos[1]+20+'px';
kwsug.style.display="";
}
else {
kwsug.innerHTML="";
kwsug.style.display="none";
}
}
}
}
},
GetXmlHttpObject: function (handler) {
var objXmlHttp=null;
if (navigator.userAgent.indexOf("Opera")>=0) return false;
if (navigator.userAgent.indexOf("MSIE")>=0) {
var strName="Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5")>=0) strName="Microsoft.XMLHTTP";
try {
objXmlHttp=new ActiveXObject(strName);
objXmlHttp.onreadystatechange=handler;
return objXmlHttp;
}
catch(e) {
return false;
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0) {
objXmlHttp=new XMLHttpRequest();
objXmlHttp.onload=handler;
objXmlHttp.onerror=handler;
return objXmlHttp;
}
return false;
}
});
function findPos(obj) {var curleft = curtop = 0;if (obj.offsetParent) {do {curleft += obj.offsetLeft;curtop += obj.offsetTop;} while (obj = obj.offsetParent);return [curleft,curtop];}}
</script>