Navbar Search Form/Input Box with Advanced Options Dropdown

This is a quick template mod that roughly emulates the search box here at vB.org, without the forum select dropdown.

I saw a few mods somewhat like it but none with the input box, and like many people here once vB.org released the new skin, I had to have the search box. So after a bit of coding and hacking around, here's the way I did it.

Time to Install: 2 Minutes
Difficulty: Easy
Template Mods: 1
Demo: http://www.sevenstring.org
Login: guest/guest (unregistered search is disabled)

AdminCP -> Style Manager -> Edit Templates -> navbar

Find:


<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions</strong></div>
</if>
</td>


Add directly after:


<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->


Optional: Remove the old search link from your navbar.

Simply comment out the search text, like so. I'm sure there's a better way to accomplish this, but that's how I pull it off on my site. Any input appreciated.


<!-- $vbphrase[search] -->


Screenshot on default style:

http://www.sevenstring.org/chris/vbmods/search_template.jpg

And on my own:
http://www.sevenstring.org/chris/vbmods/search_template2.jpg

Update 1.01

I've changed this to be a bit more useful, as it will now submit the query itself to search.php. I had it setup differently, but I think more people would prefer it this way. If you've already installed, just replace the template code.

Update for 3.7 RC4 or Gold for security token

Add the colored code:


<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
[B]<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search"

class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

[eNforce]

Thanks, working on my board.

Question though!

Instructions for removing the old Search link from the navbar? Every time I try it removes the drop down arrow from your hack.

[Guest210212002]

Hm, I haven't looked into that because I prefer to keep the old link as well. I'll take a peek at it tomorrow and see what I can come up with, if someone else doesn't get it first. :)

Edit:

Actually, though probably not the cleanest way to do it, just comment out the existing search text.


<!-- $vbphrase[search] -->


It'll remove the text, and there will just be a blank, zero sized table cell in it's place.

[The Bish]

Excellent! Installed and waiting for a way to rid myself completely of the Search link while maintaining the arrow.

[soletrader]

The dropdown doesnt work :(

[Guest210212002]

In which browser? I've tested it in IE, FF, Maxthon and Opera.

[Guest210212002]

Updated this to submit the full query (see first post).

[DiSpy]

The search box works just fine... but the dropdown arrow isn't working. :(

One change i'd like to suggest tho...

Instead of:

<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->


I used:

<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="$vboptions[bburl]/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:95px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

[The Bish]

What does this change in code do?

[DiSpy]

In case you ever move your forums, or whatever... it uses a variable to get the url of the search page instead of hard coding... just better coding, that's all.


<form action="$vboptions[bburl]/search.php" method="post">

[marcsmith73]

In order to accept POST request originating from this domain, the admin must add this domain to the whitelist.

I get the above.

[Guest210212002]

Did you strip the original search, or just remove the phrase?

[Guest210212002]

If you are running 3.7 RC4 or above, you will need to add the following colored code:


<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search"

class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

[glennybee]

Thanks Chris, nice mod.

Installed! :)

[Tiberonmagnus]

Anyone know how to add the pre-search wording in the field? Such as the blank search area would say "Search...." and when someone clicks in the field it erases so they can type in what they want to search for?

:)