| coderphp |
08-07-2007 10:00 PM |
Live Search 1.0 (AJAX)
About the hack
==============
The hack adds a quick live search form to your forum's at any place you want it,
results are to be shown exactly under the search field as you type (by ajax)
Supported browsers
==============
IE6, IE7, FF2, Opera 9
Demo
====================
http://www.montadaphp.net
right under the logo :)
How to Install
==============
1- Add the following code to the end of ur "headinclude" template:
Code:
<script type="text/javascript">
/***********************************************
* Drop Down/ Overlapping Content- ? Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display="block"
var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0)
var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
var xmlHttp3
function showHint(word)
{
document.getElementById('search_results').innerHTML = '<p></p><p></p><p align="center" class="smallfont"><img src="images/progress.gif" />Searching..</p>';
xmlHttp3=GetXmlHttpObject3()
if (xmlHttp3==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="ajax_search.php"
url=url+"?query="+word
xmlHttp3.onreadystatechange=stateChanged3
xmlHttp3.open("GET",url,true)
xmlHttp3.send(null)
}
function stateChanged3()
{
if (xmlHttp3.readyState==4 || xmlHttp3.readyState=="complete")
{
document.getElementById("search_results"). innerHTML='<div align="left"><a href="#" onClick="overlayclose(\'search_results\'); return false">x</a></div>'+xmlHttp3.responseText;
return overlay(this, 'search_results')
}
}
function GetXmlHttpObject3()
{
var objXMLHttp3=null
if (window.XMLHttpRequest)
{
objXMLHttp3=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp3=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp3
}
</script>
2- Add the following code wherever you want the search field to appear, for me i added to the "header" template exactly under the logo:
Code:
<form action="search.php?do=process" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
Live search <input type="text" name="query" size="25" class="header_search_field" onkeyup="showHint(this.value)" />
</form>
<div id="search_results" class="smallfont" style="position:absolute; border: 2px solid orange; color:blue; background-color: white; width: 300px; padding: 8px; display:none;overflow:auto; height:200px">
<div align="left"><a href="#" onClick="overlayclose('search_results'); return false">x</a></div>
</div>
3- Upload the contents of folder "Upload" to ur froum's home directory.
and u r done
If u like the hack please dont forget to click INSTALL :)
|
More Information