Click here to Skip to main content
15,174,684 members
Articles / Web Development / XHTML
Posted 18 Jun 2008


42 bookmarked

JavaScript Awesome Bar

Rate me:
Please Sign up or sign in to vote.
4.63/5 (11 votes)
18 Jun 2008BSD2 min read
A JavaScript implementation of Firefox's "Awesome Bar".



jawBar is a JavaScript implementation of Firefox 3's "Awesome Bar". While not a perfect implementation, it does contain a similar look and feel.


Having recently downloaded Firefox 3, I found their new location bar rather delightful, if not a bit overwhelming. I decided that I would like to have a similar control to use in my own web designs.

Using the code

Include the jawbar.js file in your script tags. In the window.onload event (or any event that occurs when the DOM is ready), create your jawBar object and add any items you wish.

<script type="text/javascript" src="jawbar.js"></script>
<script type="text/javascript">
window.onload = function()
    var jbar = new jawBar('awesome');
    jbar.add({text: 'Ubuntu',
        subtext: 'The best linux desktop around.',
        icon: 'ubuntu.png',
        searchValue: 'ubuntu linux os technology',
        displayValue: ''});
    jbar.add({text: 'CodeProject',
        subtext: 'Free Source code and Programming help',
        icon: 'codeproject.png',
        searchValue: ' c# .net programming code technology',
        displayValue: ''});
    jbar.add({text: 'Wikipedia',
        subtext: 'An encyclopedia anyone can edit',
        icon: 'wikipedia.png',
        searchValue: 'wiki',
        displayValue: ''});
    jbar.add({text: 'JCritters',
        subtext: 'MSAgent-style interactive critters',
        icon: 'star.png',
        searchValue: 'jcritter',
        displayValue: ''});
    jbar.add({text: 'Slashdot',
        subtext: 'News for nerds.',
        icon: 'slashdot.png',
        searchValue: 'slashdot code programming nerds technology',
        displayValue: ''});
    jbar.add({text: '',
        subtext: 'An online dictionary.',
        icon: 'dictionary.png',
        searchValue: 'dictionary', displayValue: ''});
}    </script>


The constructor is very simple, and takes only one argument, the ID of the textbox you want to convert into an awesome bar.

var bar = new jawBar('myid');
<input type="text" id="myid"/>


  • object.add(options): Adds a new item to the awesome bar. options is a JavaScript object containing the text you want to add, among other things.
  • object.position(): Attempts to position a hidden div and iframe for your awesome bar. You should need to call this, but if you alter your element's positions, you may have to.
  • Makes the div and iframe visible. Effectively shows the results of the search.
  • object.hide(): Hides the div and iframe. Effectively hides your search results.
  • object.remove(index): Removes the item at index index. If index is not provided, removes all items.

Add() Method

The add() method currently supports (and requires) the following options to be passed to it:

  • text: The text that will appear in the awesome bar.
  • subtext: The text that will appear in smaller, italicized letters under the text.
  • icon: The icon to display beside the item. Should be 16x16 pixels.
  • searchValue: The text that is actually searched when typing in the awesome bar.
  • displayValue: The text that will actually appear in the awesome bar when you click an item.


Coming next update....


Currently, if the text property wraps to the next line, the subtext may not display properly. I suspect this has to do with the offsetHeight of the div not being updated properly, as this only occurs in some browsers and not others.

I'm sure there are plenty of others. This code is more a concept than a finished product, so bugs and browser inconsistency is not unexpected.

Points of Interest

In IE6, <select> elements do not obey the z-index order and are always on top. The one exception to this rule is an iframe, which can cover the <select>. Currently, this iframe hack is used for all browsers, but I plan to make this IE6 only in the future.


  • Wednesday, June 18 2008 -- Article created.


This article, along with any associated source code and files, is licensed under The BSD License


About the Author

Web Developer
United States United States
No Biography provided

Comments and Discussions

GeneralNicely Done! Pin
DFU231-Jul-08 6:16
MemberDFU231-Jul-08 6:16 
GeneralRe: Nicely Done! Pin
Helbrax1-Jul-08 6:31
MemberHelbrax1-Jul-08 6:31 
GeneralRe: Nicely Done! Pin
DFU231-Jul-08 6:58
MemberDFU231-Jul-08 6:58 
GeneralRe: Nicely Done! Pin
Helbrax1-Jul-08 8:50
MemberHelbrax1-Jul-08 8:50 
GeneralRe: Nicely Done! Pin
Balkrishna Talele1-Jul-09 22:04
MemberBalkrishna Talele1-Jul-09 22:04 
GeneralThe BSD License Pin
Samir NIGAM18-Jun-08 22:00
MemberSamir NIGAM18-Jun-08 22:00 
GeneralRe: The BSD License Pin
Guido_d18-Jun-08 23:43
MemberGuido_d18-Jun-08 23:43 
BSD license is a 'public-domain-like' license, less restricted than GPL. You are free to do with the code what you want, as long as you can reproduce the copyright message somehow. (for instance, if you look at the binary data of Windows ftp.exe, you will see the BSD license embedded). On the other hand, if GPL were used, the code can only be reused in other GPL licensed software. So the BSD license is one of the most liberal methods of distributing source code while retaining copright.
GeneralRe: The BSD License [modified] Pin
Samir NIGAM19-Jun-08 0:01
MemberSamir NIGAM19-Jun-08 0:01 
AnswerRe: The BSD License Pin
Helbrax19-Jun-08 2:37
MemberHelbrax19-Jun-08 2:37 
GeneralRe: The BSD License Pin
Samir NIGAM19-Jun-08 2:45
MemberSamir NIGAM19-Jun-08 2:45 
GeneralRe: The BSD License Pin
Helbrax19-Jun-08 2:59
MemberHelbrax19-Jun-08 2:59 
GeneralRe: The BSD License Pin
Samir NIGAM19-Jun-08 3:34
MemberSamir NIGAM19-Jun-08 3:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.