Safari-style search boxes with Prototype

I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.

First, the JavaScript. The following code can be in the head or a separate file, as long as Prototype is already loaded.

var DEF_VAL = 'Search...';
$$('input.search').each(function(elm){
    if(Prototype.Browser.WebKit){
        elm.setAttribute('type', 'search');
        elm.setAttribute('autosave', 'saved.data');
        elm.setAttribute('results', '5');
        elm.setAttribute('placeholder', DEF_VAL);
    }else{
        if(elm.getValue() == '') elm.setValue(DEF_VAL);
        elm.addClassName('safari');
        elm.observe('focus',function(){
            if(elm.getValue() == DEF_VAL) elm.clear();
        });
        elm.observe('blur',function(){
            if(elm.getValue() == '') elm.setValue(DEF_VAL);
        });
    }
});

Now, the CSS. The first part is for all browsers, and is specific to the layout I was working with. It gets my little search field to be the right size and shape and position:

form.search {
    width: 140px;
    float: right;
    border-top: none;
    margin-top: 42px;
    margin-right: 30px;
    text-align: right;
}

form.search input.search {
    width: 130px;
    font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}

This next part is only needed for non-WebKit browsers:

form.search input.safari {
    width: 92px;
    font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
    border: none;
    color: #6f6f6f;
    padding: 6px 20px 6px 24px;
    background: url(../Resources/search.gif) no-repeat left center;
    height: 14px;
}

form.search input.safari:focus {
    color: #000;
    background-image: url(../Resources/search_focus.gif);
    overflow: visible;
}

The trick here is these background images are simple screenshots of a Safari window after the “search” field-type is applied.

In Photoshop, start with the focused variant, and erase the close ( x ) box from the right and the little drop-down triangle from the left (these will just confuse your non-WebKit users because they won’t do anything).

Then overlay another screenshot of the same field taken without focus. Erase the default text and the drop-down triangle.

Trim the image down to the very minimum you can get away with and still see the entire focus ring. Export two GIFs, one for the regular and one for the focused variant.

Now in your layout, you would just need the following:

<form class="search" ... >
    <input type="text" class="search" name="q" value="<?=$search_text?>" />
</form>

In a Safari browser, you get the native behavior. In all other browsers, you get as near to the native behavior as possible. I’ll let you know when the example is on-line.

Walter

quote

Timing is everything. I was thinking about this very thing last night and was about to ask if Apple uses Prototype to achieve the same cross-platform effect for their search fields. So is it safe to assume Walter that your approach is the same or similar?

Todd

On Mar 10, 2008, at 8:17 AM, waltd wrote:

I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.

quote

I did not look at Apple’s implementation on the code side, but I think that’s a fairly safe assumption. Apple uses quite a few different toolkits, a lot of Prototype, some jQuery, and a lot hand- rolled. Their new Store stuff is very nice and I have been using it for inspiration lately, again, not by looking at their code but by looking at what it does.

That’s not vanity or even concern for copyright infringement, but a real desire to learn How and Why rather than simply copy and paste.

I believe that Apple’s search box implementation is much more abstracted than mine. I believe that they are using a separate image for the ends and the middle, so they can respond to form fields of different lengths. I thought that would be way too tweaky for me, so I opted for something much simpler. They also use the same library function for fields on black windows as on white, so they have some additional magick going on there as well. Maybe it’s just done with PNGs or something.

Walter

On Mar 10, 2008, at 9:44 AM, Todd wrote:

Timing is everything. I was thinking about this very thing last night and was about to ask if Apple uses Prototype to achieve the same cross-platform effect for their search fields. So is it safe to assume Walter that your approach is the same or similar?

Todd

On Mar 10, 2008, at 8:17 AM, waltd wrote:

I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.

quote

On 10 Mar 2008, 1:17 pm, waltd wrote:

I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.

So this sounds really great! And if I wasn’t a lost case and really new to this, I would understand, but I don’t. I have also read a lot of other threads, but I don’t seem able to understand them either. (thinking really hard that I should not do this, and maybe try working with kids or something.) But since I have this task, I would like to finish it. I, like many others, would like to have a search field, like the one here and in many other browsers. What would be great is a tutorial. Can somebody make that? Would appreciate any help on this topic, even a tiny explanation that would make me understand that I shouldn’t try anymore and leave it out. (I don’t even know what Walter means with Prototype.js, I get that js is JavaScript, then my brain stops working)

-The lost case-

Marielle

quote

These instructions assume at least a passing familiarity with hand- coding, so they might not be the best place for you to start with Freeway. I believe that Tim Plumb made a “Safari” search available as an Action. You should have a look on ActionsForge or on Tim’s own site http://freewayactions.com to see if you can locate it.

Walter

On Jul 20, 2010, at 4:27 AM, Marielle Andersson wrote:

On 10 Mar 2008, 1:17 pm, waltd wrote:

I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.

So this sounds really great! And if I wasn’t a lost case and really new to this, I would understand, but I don’t.

quote

Hidden away in my test folder; http://www.freewayactions.com/test/safari-search/

(makes mental note to update the site soon). Thanks, Tim.

On 20 Jul 2010, at 14:23, Walter Lee Davis wrote:

These instructions assume at least a passing familiarity with hand- coding, so they might not be the best place for you to start with Freeway. I believe that Tim Plumb made a “Safari” search available as an Action. You should have a look on ActionsForge or on Tim’s own site http://freewayactions.com to see if you can locate it.

Walter

On Jul 20, 2010, at 4:27 AM, Marielle Andersson wrote:

On 10 Mar 2008, 1:17 pm, waltd wrote:

I just finished doing this for a site I’m working on, and figured I’d share. I have the blue focus ring and everything working in one shot. This uses Prototype.js 1.6 or better and CSS.

So this sounds really great! And if I wasn’t a lost case and really new to this, I would understand, but I don’t.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro. ………………………………………………………………………… Protect your mailto links from being harvested by spambots with Anti Spam. Only available at FreewayActions.com ………………………………………………………………………… http://www.freewayactions.com

quote

Thank you guys! I will try this asap! I have so far succeded in getting the atomz search to work, don’t really like the results page, but at least it works. Will check out the action made by Tim (wow, cool guy) soon and I will let you know what I think about it. Feedback is always good right, even if things are working.

Tack

Marielle

quote