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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

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.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options