Live Search 1.0 (AJAX)
This modification is in the archives.
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> 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> and u r done If u like the hack please dont forget to click INSTALL Download
This modification is archived, downloads are still allowed. Screenshots |
Similar Mods
Add-On Releases [AJAX] Live Search | vBulletin 3.7 Add-ons |