Here in UD-land, we’ve been working on some projects that require some heavy UI overhaul. One of these projects requires a “filter bar” — a search bar that filters a long list dynamically. We thought that the typical text fields would clash with the style of our design, so we opted for the Safari-esque search field.

Initial Setbacks

Unfortunately, Safari is the only browser currently that (natively) offers this nice-looking search field. What to do, what to do? Well, we could simply fake it, couldn’t we? That is, we could just have a simple text input field and tack on two rounded sides on the end, no? Unfortunately, it’s not that easy. You see, in Safari, when you select an input field, it “glows”:

There were other problems that came up along the way:

• No way to disable glow in Safari, or
• no way to only make the outside glow in Safari (if we were just using a standard text input)
• Safari uses type=”search”. However, that isn’t W3C compliant.

Solution

Well, without going into all the boring details as to what we’ve done, let me just say that we’ve turned it into a generic framework, and you can download it here. A thing to note is that it requires the Mootools framework.

Implementation

We first need to reference the right files. Remember, Mootools go before prettyinput.js.

<script src="mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="prettyinput.js" type="text/javascript" charset="utf-8"></script>


Next, we’ll place the input tag inside the HTML file. Note that the span element is optional — it defines the text inside the search bar.

<label for="YOUR-ID">
<span class="prettyplaceholder">Search</span>
<input id="YOUR-ID" class="prettysearch" type="text" />
</label>


Finally, let’s insert this Javascript snippet in the header.

window.addEvent('domready', function() {
new PrettyInput($('YOUR-ID'));
});


Voila! That’s it!

Compatibility

This is fully compatible with the following browsers:

• IE6
• IE7
• Firefox 2+
• Safari 2

Download PrettySearch (15KB)