Add-On Releases - 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:

<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:

<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

[rainyleaves]

I got Another error.

MySQL Error : Unknown column 'thread.forumid' in 'where clause'
Error Number : 1054

Then, I hard coded my table prefix...

$results = $db->query_read("SELECT * FROM ". TABLE_PREFIX ."thread WHERE `title` LIKE '%$query%' AND `thread`.`forumid` NOT IN (0 $excludelist)");
---------->
$results = $db->query_read("SELECT * FROM ". TABLE_PREFIX ."thread WHERE `title` LIKE '%$query%' AND ". TABLE_PREFIX ."thread . forumid NOT IN (0 $excludelist)");

Now works fine....

BTW, Awesome mod !!!!
Thanks, Coderphp

[coderphp]

Originally Posted by rainyleaves

I got Another error.

Then, I hard coded my table prefix...


Now works fine....

BTW, Awesome mod !!!!
Thanks, Coderphp

thanx ..

please click install if u like it

[rainyleaves]

Just Installed and MOTM

[Crazy Serb]

you do realize that this script behaves differently on Firefox and IE browsers... on Firefox it displays the results div either far left or far right on the page (NOT beside the search box), while on IE it does display it right beside the search box but it comes up with some JavaScript error (check your status bar).

Any way to make this work on FF the same way it does on IE?

[StrifeX]

Originally Posted by rainyleaves

I got Another error.

Then, I hard coded my table prefix...


Now works fine....

BTW, Awesome mod !!!!
Thanks, Coderphp

Wow, thanks for the solution to my problem

Btw coderphp, i downloaded the new version of your mod and i had the same problem, you might want to add rainyleaves' code into your php file... And you might also want to update the version of your hack to like 1.01 .

Also, how do i get the text to show "Searching..." instead of "???? ???????.." while searching?

[Magnumutz]

This is awesome... Thanks.
*Installed*

[Regs]

Someone asked earlier about queries... does this not query the server on every key press?

It's a very good idea but not too sure it is friendly for a large, busy site?

Cheers,

~Regs.

[Magnumutz]

There's only 1 (ONE) query: https://vborg.vbsupport.ru/showpost....5&postcount=16

[Regs]

Yes, I read that. But my question remains - is this one query on every keystroke?

[Brew]

In FireFox the mod looks great but it's a bit different in IE. The box comes up too small in IE.

EDIT:
I forgot to mention that the below pics were taken after adding the code for the div statement from another reply; overflow:auto; height:200px but the layout is the same with or without the change.

Examples below..The first image is FF the second is IE..