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

[dbirosel]

Will this ever work for the Opera Browser? Subscribed.

[JD45]

Originally Posted by coderphp

of course it could

How?
do steps 1 and 3
then
add the onclick event to the search field:

onkeyup="showHint(this.value)"

then, after the field, add the hidden div where the search results appears:

<div id="search_results" class="smallfont" style="position:absolute; border: 2px solid orange; color:blue; background-color: white; width: 300px; padding: 8px; display:none">
<div align="left"><a href="#" onClick="overlayclose('search_results'); return false">x</a></div>
</div>

Thank you much!

[FreshFroot]

i'll try this out, looks great.

[TheBlackPoet]

Originally Posted by 4x4 Mecca

Right now all my search result text is white for some reason.. I made the background navy to see the text, where would I change the text color?

if you want to change the text code... its probably in the Main CSS

<div id="search_results" class="smallfont" style="position:absolute; border: 2px solid orange; color:blue; background-color: white; width: 300px; padding: 8px; display:none">
<div align="left"><a href="#" onClick="overlayclose('search_results'); return false">x</a></div>
</div>


that worked for me....

I was looking at the css.. and if i have time tomorrow (if the coder dont mind).. i want to see if i can make the background with a little less opacity (transparent).... that'll be cool...

[Brew]

There is a bug in the ajax_search.php file

You've forgotten to add code in there for table prefixes.

In my setup I used vb_ for my tables of vBulletin so this mod gives DB errors.

I included an image showing the DB error below.

I hard coded my table prefix to the file but you'll need to use the variable to fix it.

It's working BTW.

Good job!

[apdcanari]

Good hack

/images/progress.gif (empty)

Overflow

<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]" />
<strong>Live Search</strong> <input type="text" name="query" size="25" class="search" 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>

[Brew]

Originally Posted by apdcanari

Good hack

/images/progress.gif (empty)

Overflow

<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]" />
<strong>Live Search</strong> <input type="text" name="query" size="25" class="search" 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>

Thanks!

That looks much better

[rainyleaves]

Great mod.
But you have forgotten to add code in there for table prefixes.

Database error in vBulletin 3.6.8:

Invalid SQL:
SELECT * FROM `thread` WHERE `title` LIKE '%24%' AND `thread`.`forumid` NOT IN (0 );

MySQL Error : Table '*****.thread' doesn't exist
Error Number : 1146
Date : Thursday, August 9th 2007 @ 05:23:39 PM
Script : http://*****.***/forums/ajax_search.php?query=24
Referrer : http://*****.***/forums/newthread.php?do=newthread&f=6
IP Address : *******
Username : *****
Classname : vB_Database

Please help...
Thanks..

[StrifeX]

I'm having the same problem, i get a database error saying there is a problem with the table prefix...

[FReeSTER]

Im getting a data base error.

Database error in vBulletin 3.6.5:

Invalid SQL:
SELECT * FROM `thread` WHERE `title` LIKE '%c%' AND `thread`.`forumid` NOT IN (0 ,186);

MySQL Error  : Table 'satpro_web.thread' doesn't exist
Error Number : 1146
Date         : Thursday, August 9th 2007 @ 06:03:07 AM
Script       : http://www.satprolatino.tv/ajax_search.php?query=c
Referrer     : http://www.satprolatino.tv/foro.php
IP Address   : **.242.***.7
Username     : El Intocable
Classname    : vb_database