Search Widget

February 26th, 2010 Leave a comment Go to comments

The StickiWidgets Search Widget enables a quick search on any site within the page so that users have access to addtional information. To activate the search, just highlight text on a page and press q. A popup div will open with the search results. The highlighted text will be used as the search term and can consist of a single or multiple words. Users can then access additional information in a new browser window by clicking an item in the search results.

Search and results are powered by Google utilizing the Google AJAX Search API. Site publishers can customize the search for specific sites or other search types available in the API. The results for each search is tabbed in the popup div. Instructions to enable the Search Widget on your site is provided below. Registration with Google to obtain an API key is required.

The biggest issue we have run into is balancing the automated search and educating the user on how to use the search.

Key Features:

Currently only tested and verified to work on Windows XP Pro with Firefox 2, Internet Explorer 7 and Safari 3.

Highlight text and then press q (on this site) to see how the Search Widget works.

Installation Instructions

The javascript source is here and css source is here. Right-click and “save as” for both. Upload to your site’s typical location for each file. Copy and paste the following code to your HTML file or template. Make sure to obtain a Google API Key. Replace [API KEY] with the key in the code below. Also, make sure the links to the js and css files are to the correct locations. Simple style changes can be made in the css file. The search tabs can be customized via the js file.

Code for HTML page (recommend placing just after the <body> tag):

<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css" />
<link href="sw_search_widget.css" rel="stylesheet" type="text/css" />
<div id="swSearchWidget" class="swSearchWidgetClass">
<div id="swSearchClose" class="swSearchCloseClass" onclick="swCloseDiv();">close</div>
<div id="swSearchResults" class="swSearchResultsClass"></div>
</div>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=[API KEY]" type="text/javascript"></script>
<script src="sw_search_widget.js" type="text/javascript"></script>

You are welcomed to link directly to the sw_search_widget.js file on stickiwidgets.com.

http://stickiwidgets.com/widgets/sw_search_widget/sw_search_widget.js

This way you will always have the latest code. However, this means you will be subject to whatever code we have and any site outages or issues.

Feedback and comments are always welcomed.