Working with the Searchbar Element
The searchbar element packs several search-related features into one. It may include any of the following:
- An input box for the user to perform web searches;
- A Search Engine selector menu;
- A history and suggestions popup;
- A word highlighter button with individual word-highlight buttons; and
- A Last Search button.
This tutorial will cover the creation of a simple search bar. Please visit the “searchbar” element in the DTX Element Reference for more details on how the search bar can be used.
To get a search bar into your toolbar you must add a “searchbar” tag to your toolbar XML:
<searchbar id="mybar-search" engines="data\\engines.xml" />
At this point the search bar will appear, but its functionality will be very limited until we have added some contents to the “engines.xml” file. The “engines” attribute points to a local file in the chrome folder. This file should contain the description for search engines we want to use in the toolbar.
Search engines are specified using the OpenSearch standard. You may also need to add some extra tags to allow the search engine full interaction with your “searchbar” element.
The contents of engines.xml could be as follows:
<?xml version="1.0" encoding="utf-8"?>
<engines>
<OpenSearchDescription
xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Google</ShortName>
<Description>Use Google to search the Web.</Description>
<Contact></Contact>
<Url type="application/atom+xml"
template="http://www.google.com/search?q={searchTerms}&format=atom"/>
<Url type="application/rss+xml"
template="http://www.google.com/search?q={searchTerms}&format=rss"/>
<Url type="text/html"
template="http://www.google.com/search?q={searchTerms}"/>
<LongName>Google Web Search</LongName>
<Image height="16" width="16" type="image/png">
skin/google.png
</Image>
<Query role="example" searchTerms="cat" />
<Developer>Google</Developer>
<Attribution>
</Attribution>
<SyndicationRight>open</SyndicationRight>
<AdultContent>false</AdultContent>
<Language>en-us</Language>
<OutputEncoding>UTF-8</OutputEncoding>
<InputEncoding>UTF-8</InputEncoding>
<interpret type="resulturl"
data="http://www\.google\..*/search.*?q=(.*)" />
</OpenSearchDescription>
</engines>
If you look at the OpenSearch standard you will see that essentially everything in this XML comes from the standard. We will not spend much time going over OpenSearch here. Only one node is particular to DTX:
<interpret type="resulturl"
data="http://www\.google\..*/search.*?q=(.*)" />
This tells the search bar how to extract the search terms out of a search results page that may have been loaded by another feature. For instance, let’s imagine the user visits www.google.com and on the home page searches for “Toolbars”. The user entered the search terms outside of the toolbar, but we would still want that the terms are picked up by our search bar ; the interpret node does that. The data attribute contains a regular expression that can be used to extract the search terms from any URL.
By default, the engine selector message is populated as a flat list containing the engines listed in the engines.xml file. To get a custom menu please look at the “enginestemplate” attribute in the “searchbar” element reference.
