Toolbar Tutorial - Adding a Search Box

Next


Next we will add a dropdown combo box, and a search button. This will provide basic functionality to search the download.com site from our toolbar.

You can test the new functionality by typing in some text and clicking the Search button.

Source:

<XML id="toolbar">
<TOOLBAR caption="Toolbar Tutorial">
<control type="toolbar">
<button id="home"

    caption="Download.com: "
    action="http://www.download.com"
    tooltip="Download.com Home Page">

</button>
</control>

<control type="combo" id="query" action="Command(search)" width=120>
</control>

<control type="toolbar">
<button caption="Search" tooltip="Search Download.com" image="http://www.toolbarbrowser.com/img/magnify.ico" action="Command(search)"></button>
</control>


<MENUDEFINITIONS>
</MENUDEFINITIONS>

<COMMANDS>
    <command id="search" action="http://www.download.com/3120-20-0.html?qt=%QUERY%&tg=dl-2001&search.x=17&search.y=2"></command>

</COMMANDS>

</TOOLBAR>
</XML>





Remarks:

  • To simplify the code, we have used the command tag. This enables us to call the search command from both the combo box control (when the returned key is pressed), or when the Search button is clicked.
    To execute the command, we use the Command() function.

  • Note the %_QUERY% variable in the search command URL. The variable is used to reference the current value of the query control, in this case the search box.