The Arcive of Official vBulletin Modifications Site.

[YUI] Live Search · **Released**: 02-06-2009

Features:

search only, if typed >= 3 symbols;
header to window with button close;
message about no result;
limit number of threads;
highlight words in result
trim title of thread, if it large (optional)
edit position of pop-up window
work with vBadvanced
limit the number of displayed results
group permission
search by your own forums
sort results of search
mod makes only one query to db
full compatibility with styles and browsers
search by individual words
integrate option into standard search
search only the specified length of each word
users search
interval requests
wrote 2 js class

Rewritten many things since version 1.6

Known Issues
Double click in search field - still not fixed.

Installation:
Upload all files from folder upload to forum folder.
Import product.

Upgrade
Uninstall the old version, delete files (if you has use it) and install new version.

If you already have opened search field, do following.
Search field look like this:

HTML 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]" />
                    <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
                    <input type="text" class="bginput" name="query" size="25" tabindex="1001" />
                    <input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" />

                </form>

So, after the opening tag <form ХХХ> add bottom:

HTML Code:

                    <div id="lsa_window">

Before the closing tag </form> add:

HTML Code:

                    </div>

We have prepared the search form to pop-up window. Now we need to bind to the field of javascript.
For this in tag <input type="text" /> add id="lsa_input"
As a result, you should get some of this code:

HTML Code:

				<form action="search.php?do=process" method="post">
					<div id="lsa_window">
					<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]" />
					<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
					<input type="text" id="lsa_input" class="bginput" name="query" size="25" tabindex="1001" />
					<input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" />
					</div>
				</form>

P.S. If you already have id in your search field and its change may be possible to reset the anchor CSS, do the following.
Open the template lsa_script and edit the line

var lsa = new AJAX_LiveSearch_Prepare("lsa", "lsa_input", "lsa_window");

where the arguments of the class:
lsa - variable name initialize class js
lsa_input - search field id
lsa_window - pop-up window id

Thus, changing the arguments of the class AJAX_LiveSearch_Prepare, you can not edit the search field.

Live DEMO: http://mixplay.ru/ (user: test, pass: 123456)
Live video: http://www.youtube.com/watch?v=t_16fk5VGYw

PS Some function writed by ChangUonDyU

If you like this mod - Click Install it

mad@Max · #**272** 07-11-2009, 12:06 PM

Hm, really, one phrase was missing. Updated.

mad@Max · #**273** 07-11-2009, 07:45 PM

Version 3.0.2
Fixed previous bug with YUI forces

katie hunter · #**274** 07-19-2009, 04:12 PM

Hi,

Thanks mad@Max, nice mod =)

I am having a small issue with my custom template though
Would anyone know how to fix this?

when the search load, the pop up window shows over the box where you put your text in not under it.
How can i make it show under Advance search?

This is my template

PHP Code:


			
 <div class="quicksearch">
  <p>Quick Search</p>
<form action="search.php?do=process" method="post">
<div id="lsa_window">
                <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="" />
                <input type="hidden" name="securitytoken" value="guest" />
                    
                            <div class="searchBoxInput">

                                <input type="text" id="lsa_input" class="searchinput" name="query" value="Search Forum" onfocus="if (this.value == 'Search Forum') this.value = '';" onblur="if (this.value == '') this.value = 'Search Forum';" />
                            </div>
                            <span class="loginButton">
                                <input type="image" src="$stylevar[imgdir_misc]/gosearch.gif" value="Search" alt="Submit" />
                            </span>
 </div>
</form>
    <div class="memberLinks">
        <a href="search.php">Go Advanced</a>
    </div>    
 </div>
</div>

mad@Max · #**275** 07-19-2009, 04:28 PM

Show your css class searchBoxInput.

katie hunter · #**276** 07-19-2009, 06:14 PM

Hi, this ?

PHP Code:


			
.searchBoxInput {
    background: url(images/ogen/misc/searchBoxInput.gif) no-repeat top left;
    width:226px;
    height:21px;
    float:left;
}

mad@Max · #**277** 07-19-2009, 06:26 PM

Replace into your css class float:left; on text-align:left;.

katie hunter · #**278** 07-19-2009, 06:42 PM

Hi I don't know what you mean..
There so many of these --> float:left; on text-align:left;.

This is my whole css

PHP Code:


			
img {
border: 0;
}

/* Header CSS */
.header {
height: 99px;
}

.header_left {
float:left;
background: url(images/orangetheme/misc/headerbg.gif) no-repeat top right;
height: 74px;
width: 351px;
padding-left: 94px;
padding-top: 25px;
}

.header_right {
float:right;
padding-top: 21px;
height: 78px;
padding-right: 10px;
}

/* Nav CSS */
.nav {
height: 37px;
background: url(images/orangetheme/misc/navbg.gif) repeat-x;
padding-left: 10px;
}

.navright {
float:right;
margin-top: 4px;
background: url(images/orangetheme/misc/navright.gif) no-repeat;
height: 33px;
line-height: 33px;
width: 203px;
padding-left: 23px;
margin-right: 10px;
}
.navBackTop {
float:right;
background:url(images/orangetheme/misc/backTop.gif) no-repeat;
margin:4px 10px 0 0;
width:94px;
height: 33px;
line-height: 33px;
padding-left:12px;
text-align:center;
}
.navright a:link, .navright a:hover, .navright a:active, .navright a:visited,
.navBackTop a:link, .navBackTop a:hover, .navBackTop a:active, .navBackTop a:visited {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-family: arial;
}

.navleft {
float:left;
}

.navitem {
height: 37px;
}

.quicksearch p {
width: 254px;
height: 9px;
line-height: 9px;
background: url(images/orangetheme/misc/quicksearchbg.gif) no-repeat top right;
padding: 0px;
margin: 0px;
margin-bottom: 4px;
padding-left: 5px;
}

.navitem a:link, .navitem a:hover, .navitem a:active, .navitem a:visited {
font-family: arial;
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 20px;
}

.memberandsearch {
background: #e6e6e6 url(images/orangetheme/misc/memberandsearch.gif) repeat-x;
margin-top: 1px;
border-top: #969696 1px solid;
border-bottom: #c4c4c4 1px solid;
height: 70px;
padding-left: 10px;
padding-right: 10px;
}

.navbc {
background: url(images/orangetheme/misc/navbcbg.gif) repeat-x;
margin-top: 2px;
margin-bottom: 8px;
}

.navbcright {
background: url(images/orangetheme/misc/navbcright.gif) top right no-repeat;
}

.navbcleft {
background: url(images/orangetheme/misc/navbcleft.gif) no-repeat;
height: 24px;
padding-top: 9px;
padding-left: 36px;
}

.navbcleft a:link, .navbcleft a:hover, .navbcleft a:active, .navbcleft a:visited {
color: #6a6a6a;
text-decoration: none;
font-family: arial;
font-size: 11px;
}

.memberlogin {
float:left;
}

.quicksearch {
float:right;
padding-top: 12px;
}

.searchfield {
float:left;
}

/* Main Page CSS */
.tcat_bg {
background: url(images/orangetheme/misc/tcat_bg.gif) repeat-x;
}

.tcat_right {
background: url(images/orangetheme/misc/tcat_right.gif) no-repeat top right;
}

.tcat_left {
background: url(images/orangetheme/misc/tcat_left.gif) no-repeat top left;
height: 34px;
line-height: 34px;
padding-left: 16px;
font-family: arial;
font-size: 12px;
color: #fff;
}

.tcat_left a:hover, .tcat_left a:active, .tcat_left a:visited, .tcat_left a:link {
font-family: arial;
font-size: 12px;
color: #fff;
text-decoration: none;
}

.tfoot_bg {
background: url(images/orangetheme/misc/tfoot_bg.gif) repeat-x top left;
}

.tfoot_r {
background: url(images/orangetheme/misc/tfoot_r.gif) no-repeat top right;
}

.tfoot_l {
height: 9px;
font-size: 1px;
background: url(images/orangetheme/misc/tfoot_l.gif) no-repeat top left;
}

.search-quick {
background: url(images/orangetheme/misc/searchbg.gif) no-repeat;
border: 0px;
width: 219px;
height: 16px;
padding-top: 5px;
padding-left: 7px;
}

.goadv {
clear:both;
margin-top: 7px;
padding-left: 5px;
}

.goadv a:link, .goadv a:hover, .goadv a:active, .goadv a:visited {
font-size: 11px;
color: #7e7e7e;
text-decoration: none;
}

/* Postbit CSS */
.vbmenu_c {
height: 34px;
padding: 0px;
padding-right: 6px;
line-height: 34px;
}

.vbmenu_c a:link, .vbmenu_c a:hover, .vbmenu_c a:active, .vbmenu_c a:visited {
color: #fff;
font-size: 12px;
font-family: arial;
text-ddecoration: none;
}

.alt2pbt {
background: #f1f1f1 url(images/orangetheme/misc/alt2pbt.gif) top left repeat-x;
border-right: #fff 1px solid;
border-top: #dadada 1px solid;
border-left: #dadada 1px solid;
}

.alt1pbt {
background: #f1f1f1 url(images/orangetheme/misc/alt1pbt.gif) top left repeat-x;
border-right: #dadada 1px solid;
border-top: #dadada 1px solid;
border-left: #d8d8d8 1px solid;
font-family: arial;
font-size: 12px;
color: #2d2d2d;
}

.alt2pbb {
background: #f1f1f1;
border-right: #fff 1px solid;
border-bottom: #dadada 1px solid;
border-left: #dadada 1px solid;
}

.alt1pbb {
background: #f1f1f1;
border-bottom: #dadada 1px solid;
border-left: #d8d8d8 1px solid;
}

.greyblock {
margin: 1px 0;
height: 2px;
font-size: 1px;
background: #bcbcbc;
}

.pbbox {
font-family: arial;
font-size: 11px;
color: #000000;
background: url(images/orangetheme/misc/pbboxbg.gif) repeat-x;
text-align: center;
width: 148px;
height: 24px;
line-height: 24px;
overflow:hidden;
}

.pbbox1 {
font-family: arial;
font-size: 11px;
color: #000000;
background: url(images/orangetheme/misc/pbbox1.gif) repeat-x;
text-align: center;
width: 148px;
height: 25px;
line-height: 25px;
}

.pbinfo {
color: #df6d00;
}

/* Footer CSS */
.copyright {
color: #3b3b3b;
line-height: 1.6;
}

.footer {
height: 77px;
background: url(images/orangetheme/misc/footerbg.gif) repeat-x;
border-top: #969696 1px solid;
margin-top: 0px;
}
.footerWrap {
background: url(images/orangetheme/misc/footerRight.gif) no-repeat top right;
height:77px;
}
.footerLogo {
float:right;
padding:18px 97px 0 0;
}
.copyright {
float:left;
padding:20px 0 0 10px;
}
.memberBox {
    float:left;
    width:291px;
    height:74px;
    padding:12px 0 0 0px;
}
.memberBox form, .searchBox form {
    margin:0;
    padding:0;
}
.memberBox input, .searchBox input {
    float:left;
}
.memberBox p {
width: 274px;
height: 9px;
line-height: 9px;
background: url(images/orangetheme/misc/memberboxbg.gif) no-repeat top right;
padding: 0px;
margin: 0px;
margin-bottom: 4px;
padding-left: 5px;
}
.loginBox {
    height:25px;
}
.loginBoxInput {
    background: url(images/orangetheme/misc/loginBoxInput.gif) no-repeat top left;
    width:122px;
    height:21px;
    float:left;
}
.logininput {
    border:0;
    background:transparent;
    font:8pt arial, helvetica, sans-serif;
    color: #9a9a9a;
    padding:4px 0 2px 0;
    width:108px; 
    margin:1px 7px 0 7px;
}
.searchBoxInput {
    background: url(images/orangetheme/misc/searchBoxInput.gif) no-repeat top left;
    width:226px;
    height:21px;
    float:left;
}
.searchinput {
    border:0;
    background:transparent;
    font:8pt arial, helvetica, sans-serif;
    color: #9a9a9a;
    padding:4px 0 2px 0;
    width:212px; 
    margin:1px 7px 0 7px;
}
.loginButton {
    float:left;
    padding-left:5px;
}
.memberLinks {
    font:8pt arial, helvetica, sans-serif;
    color: #7e7e7e;
    padding-left:5px;
}
.memberLinks a:link, .memberLinks a:visited {
    color: #7e7e7e;
    text-decoration:none;
}
.memberLinks a:hover {
    color:#e16a00;
    text-decoration:none;
}
.memberInfo {
    float:left;
    padding:22px 0 0 23px;
    font:9pt arial, helvetica, sans-serif;
    color:#545e69;
}
.memberInfo a:link, .memberInfo a:visited {
    font-weight:bold;
    color:#1f5891;
}
.memberInfo a:hover {
    color:#545e69;
}
.postbitBG {
    background: #fdfdfd url(images/orangetheme/misc/postbitBG.gif) repeat-x bottom left;

}

mad@Max · #**279** 07-19-2009, 07:30 PM

I mean change

HTML Code:

.searchBoxInput {
    background: url(images/ogen/misc/searchBoxInput.gif) no-repeat top left;
    width:226px;
    height:21px;
    float:left;
}

on

HTML Code:

.searchBoxInput {
    background: url(images/ogen/misc/searchBoxInput.gif) no-repeat top left;
    width:226px;
    height:21px;
    text-align:left;
}

katie hunter · #**280** 07-19-2009, 08:23 PM

Quote:

Originally Posted by mad@Max

I mean change

HTML Code:

.searchBoxInput {
    background: url(images/ogen/misc/searchBoxInput.gif) no-repeat top left;
    width:226px;
    height:21px;
    float:left;
}

on

HTML Code:

.searchBoxInput {
    background: url(images/ogen/misc/searchBoxInput.gif) no-repeat top left;
    width:226px;
    height:21px;
    text-align:left;
}

Hi,

That kinda moved my go button down

mad@Max · #**281** 07-19-2009, 08:35 PM

Hm, try add float:right; to loginButton class.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05459 seconds Memory Usage 2,516KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (8)bbcode_html (3)bbcode_php (1)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (11)post_thanks_postbit_info (10)postbit (5)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!