WebSearchUI - jQuery UI Widget (get non-dependant version here)

Overview (demo)

This code is designed to make it easy to add a search widget to your web site.

It utilizes the jQuery widget factory so that makes it dependent on jQuery and several jQuery UI components (listed below). This also makes it compatible with the jQuery UI Themeroller and all of the available themes.

Usage

• Html

    <input id="web-search" type="text">
  

• Script (default settings shown)

    $(document).ready(function(){
        // Set/Replace default search sites
        // ********************************
        // set/replace default  'Name' : [ 'css-class', 'search string/{s}' ]
        // remove default       'Name' : ''
        // ********************************
        // 'Name' can include spaces
        // 'css-class' should be a css class with a 20x20 pixel (ideally 16x16) background image
        // 'search-string' is determined by searching the site, then copying the location URL, replace the query with {s}
        //  var webSites = {
        //   'DuckDuckGo' : ['ui-icon-duckduckgo', 'http://duckduckgo.com/?q={s}'], // Add/replace web site
        //   'WebCrawler' : ''                                                      // Remove WebCrawler from default list
        //  };
        var webSites = { /* 'Name' : [ 'css-class', 'search string{s}' ] */
            'Alta Vista'    : ['ui-icon-altavista',     'http://us.yhs4.search.yahoo.com/yhs/search?fr=altavista&q={s}'],
            'Amazon'        : ['ui-icon-amazon',        'http://www.amazon.com/s/url=search-alias%3Daps&field-keywords={s}'],
            'Ask.com'       : ['ui-icon-ask',           'http://www.ask.com/web?q={s}'],
            'Bing'          : ['ui-icon-bing',          'http://www.bing.com/search?q={s}'],
            'Dictionary'    : ['ui-icon-dictionary',    'http://dictionary.reference.com/browse/{s}'],
            'Dog Pile'      : ['ui-icon-dogpile',       'http://dogpile.com/dogpile_other/ws/results/Web/{s}/1/417/TopNavigation/Relevance/'],
            'DuckDuckGo'    : ['ui-icon-duckduckgo',    'http://duckduckgo.com/?q={s}'],
            'Google'        : ['ui-icon-google',        'http://www.google.com/search?q={s}'], // *** This is the default site ***
            'Lycos'         : ['ui-icon-lycos',         'http://search.lycos.com/?tab=web&query={s}'],
            'StackOverflow' : ['ui-icon-stackoverflow', 'http://stackoverflow.com/search?q={s}'], // you can search for tags too "[jQuery] websearch"
            'WebCrawler'    : ['ui-icon-webcrawler',    'http://www.webcrawler.com/webcrawler/ws/results/Web/{s}/1/417/TopNavigation/Relevance/'],
            'Wikipedia'     : ['ui-icon-wikipedia',     'http://en.wikipedia.org/w/index.php?search={s}'],
            'Wolfram Alpha' : ['ui-icon-wolfram',       'http://www.wolframalpha.com/input/?i={s}'],
            'Yahoo'         : ['ui-icon-yahoo',         'http://search.yahoo.com/search?p={s}']
        };
        $('#web-search').websearch({
            defaultSite     : "Google",  // Set the default search site.
            windowTarget    : '_blank',  // Choose from '_blank', '_parent', '_self', '_top' or '{framename}'
            windowOptions   : '',        // Window options ("menubar=1,resizable=1,width=350,height=250", etc)
            tooltipClass    : 'tooltip', // class added to the button, in case tooltips are to be used (site name and above message are in the button title).
            hideSelector    : false,     // if true, the site selector button will be hidden
            sortList        : true,      // if true, the site selection list will be sorted.
            hidden          : false,     // if true, the entire websearch widget will be hidden.
            searchResult    : null,      // add a search method here in case you want to open the search page in a lightbox.
            websearch       : webSites   // add/replace/remove site searches; see the webSites variable above for examples.
        });
    })
  

Events

• Change

    $('#web-search').bind('change', function(event,site){
        alert('Search changed to ' + site);
    })
  

Methods

Some examples show two methods:

    * the first is from the UI widget interface
    * the second works with both this version and the non-UI version

• Destroy

    $('#web-search').websearch('destroy');
  

• Get

    // Get current search site (two methods)
    var current = $('#web-search').websearch('current');        // returns "Google"
    var current = $('#web-search').data('websearch').current(); // returns "Google"
  

• Set

    // Set current search site (two methods)
    var current = $('#web-search').websearch('current', 'Yahoo'); // sets and returns "Yahoo"
    var current = $('#web-search').data('websearch').current('Yahoo'); // sets and returns "Yahoo"
  

• Search

    // Initiate a search (two methods)
    // .websearch('search', {query}, {window target}, {window options});
    $('#web-search').websearch('search', 'Homer Simpson', '_blank', 'menubar=0');
    $('#web-search').data('websearch').search('Homer Simpson', '_blank', 'menubar=0');
  

• Search Results

     // Add a new search result method to open the search results inside a colorbox popup window (http://colorpowered.com/colorbox/)
     $('#web-search').websearch({
         searchResult: function(url) {
             $.colorbox({ width: '80%', height: '80%', iframe: true, href: url });
         }
     })
  

Web Site Search String

• Add, Replace or Remove Sites

• By default, only Google.com is added to the plugin (changed in version 1.1.1).

• To disable Google, just add an empty string (see example below)

• To add or remove a site, set the parameters as follows:

       // set/replace default  'Site Name' : [ 'css-class', 'search string/{s}' ]
       // remove default       'Site Name' : ''
       // 'Site Name' can include spaces
       // 'css-class' should be a css class with a 16x16 background image.
       // 'search-string' is determined by searching the site, then copying the location URL, replace the query with {s}
       
       var webSites = {
       //  'Site Name'  : ['css-class',          'search string{s}' ]
           'DuckDuckGo' : ['ui-icon-duckduckgo', 'http://duckduckgo.com/?q={s}'], // Add/replace web site
           'Google'     : ''                                                      // Remove Google from default list
       };
  

• Determining a String - This is the method I used to determine each site's search string. There may be a better method, but this is what worked for me.

• If I didn't include a web site that you need, then you can determine its search string by going to the site, entering any query that is easily recognizable, like "Homer Simpson".

• For Dogpile, you'll find this as the browser location:

       http://dogpile.com/dogpile/ws/results/Web/Homer%20Simpson/1/417/TopNavigation/Relevance/iq=true/zoom=off/_iceUrlFlag=7?_IceUrl=true
  

• At this point you can see the query is Homer%20Simpson but there are a whole bunch of extra parameters

• My first attempt would be to strip out all the extra parameters and try this, which didn't work:

       http://dogpile.com/dogpile/ws/results/Web/Homer%20Simpson/
  

• In subsequent attempts I just added back each parameter to the browser location until I found one that worked:

       http://dogpile.com/dogpile_other/ws/results/Web/Homer%20Simpson/1/417/TopNavigation/Relevance/
  

• Now just replace the query with {s} and you have your search string:

       http://dogpile.com/dogpile_other/ws/results/Web/{s}/1/417/TopNavigation/Relevance/
  

• Other sites like Google proved to be much easier.

• Extra Search String Parameters

• You can set the WebSearch site string to have specific targets, for instance if you want to use Google to search your own site then modify the string as below. The site:mysite.com is one of Googles advanced search parameters. It must be separated from the query string by either a space or plus (+) sign.

       http://www.google.com/search?q=site:mysite.com+{s}
  

• In the StackOverflow string, you can target specific tags. Again, make sure it is separated from the query:

       http://stackoverflow.com/search?q=[jquery] {s}
  

• Each site uses different "advanced" parameters, so I won't list them all here.

Themeing

• This widget is designed to work with jQuery UI CSS Framework. So it will match your jQuery UI theme. If more customization is needed, look at the example markup below.

    <div class="ui-websearch ui-widget">
        <input type="text" id="web-search" class="ui-websearch-input ui-widget-content ui-corner-left">
        <button class="ui-websearch ui-state-default tooltip ui-widget ui-button-text-only">
            <span class="ui-button-text">
                <span class="ui-icon ui-icon-websearch ui-icon-google"></span>
            </span>
        </button>
        <button class="ui-state-default ui-corner-right tooltip ui-widget ui-button-text-only">
            <span class="ui-button-text">
                <span class="ui-icon ui-icon-websearch-popup ui-icon-triangle-1-s"></span>
            </span>
        </button>
        <div class="ui-websearch-popup ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
            <a data-name="Google" class="site ui-state-default" href="#">
                <span class="ui-icon ui-icon-websearch ui-icon-google"></span>
                Google
            </a>
        </div>
    </div>
  

Dependencies

• jquery
• jquery.ui.core.js
• jquery.ui.widget.js
• jquery.ui.button.js

Change Log

• Version 1.1.2

  • Removed "ui-helper-hidden-accessible" class and it prevented the popup from showing. The jQuery UI class was changed in version 1.8.7.

• Version 1.1.1

  • Added hideSelector option to allow hiding the site selector button
  • Moved & Renamed the respository to WebSearchUI
  • Improved the sharpness of the search site icons.
  • Removed destroy method from non-jQuery UI version.

• Version 1.1

  • Added an extra button with a down arrow next to the search button to make it's function more clear.
  • Added windowTarget option to replace the openNewWindow and make it more flexible.
  • Added windowOptions option to allow for adding window options.
  • Added searchResult option to allow for search results to popup in a lightbox, see the "Search Result Method" section above for an example.
  • Added a search method to initiate a search without user interaction. See the "Search" section above for an example. Thanks Tentonaxe!
  • Removed openNewWindow option.
  • Removed clickToSearch option.
  • Removed clickMessage option.

• Version 1.0

  • initial commit