Simulating the Safari search field

Legacy Dynamo
1

Until the HTML5 input#search element becomes completely widespread,
you still may want to differentiate your search fields from the rest
of your form. Here’s a quick way to do this (using Prototype,
naturally).

var testSearch = new Element('input',{type:'search'});
var filter = $('filter');
if(testSearch.type == 'search'){
	filter.writeAttribute('type','search');
}else{
	filter.addClassName('search');
	filter.up('div').insert('<div id="clear_filter">⨂</div>');
}

Then you need to have wrapped the filter field in a DIV with
position:relative or position:absolute on it, and you need the
following CSS to give the desired shape and positioning.

.search {
	-moz-border-radius: 9px;
	border-radius: 9px;
	padding: 3px 22px 3px 6px;
	border: 1px solid #adadad;
	font: 11px/1 "Lucida Grande",
	Lucida, Verdana, sans-serif;
}

#clear_filter {
	font-size: 11px;
	line-height: 1;
	color: #878787;
	position: absolute;
	top: 4px;
	right: 4px;
	width: 16px;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

Happy holidays!

Walter

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

2

Oops, forgot the part that makes the clear_search part actually do something:

$$('#clear_filter').invoke('observe','click',function(evt){ filter.clear().focus(); })

Walter

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

3

Hi Walter

Just revisiting this as when I tried it before Christmas it wouldn’t work for me - and then I forgot about it!

I have tried it again but couldn’t get it to work unless I used Item Extended on the search field and added the parameters type:search to the Input Tab

My reading of the code is that this part should be done for you automatically - or have I got it wrong?

Can you clarify please - I currently have the code in Top Function Body of Protaculous using prototype and the CSS in before end head.

Page here http://www.deltadesign.co/_search.html

David

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

4

This line right here:

var filter = $('filter');

Change the name of the field you’re selecting to match your actual
search form input:

var filter = $('q');

Walter

On Feb 5, 2011, at 10:27 AM, DeltaDave wrote:

Hi Walter

Just revisiting this as when I tried it before Christmas it wouldn’t
work for me - and then I forgot about it!

I have tried it again but couldn’t get it to work unless I used Item
Extended on the search field and added the parameters type:search to
the Input Tab

My reading of the code is that this part should be done for you
automatically - or have I got it wrong?

Can you clarify please - I currently have the code in Top Function
Body of Protaculous using prototype and the CSS in before end head.

Page here http://www.deltadesign.co/_search.html

David

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

5

It would appear that

<input name="q" value="search" size="28">

Is created by the Simple Site Search action as the ‘q’ doesn’t appear in the inspector.

But I have changed that line to

var filter = $('q');

But still no go!

D

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

6

Aha, and it doesn’t have an ID. Bad Freeway, very bad!

Try this to access it, then:

var filter = $$('input[name="q"]').first();

Freeway cheerfully puts IDs on most other things, but not form inputs
where they could do some good!

Walter

On Feb 5, 2011, at 11:22 AM, DeltaDave wrote:

It would appear that

<input name="q" value="search" size="28">

Is created by the Simple Site Search action as the ‘q’ doesn’t
appear in the inspector.

But I have changed that line to

var filter = $('q');

But still no go!

D

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

7

Thanks Walter I will try that once I have collected no2 daughter from Drama class

The lack of ID - is that a general FW thing or specific to this action ‘Simple Site Search’

D

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

8

Sadly, it’s a Freeway thing. If it’s an input you’re adding yourself, you need to use Item / Extended to put it back where it belongs. I’ve also written an Action to sort this, look for FormFix in the Forge; but I haven’t tested it with the Site Search Action, so I don’t know if it leaps in at the appropriate moment in order to alter that field or not.

Walter

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

9

Just to wrap this up in a bow, here’s the instructions and code all in one place.

Click once on your search field, move to the third tab from the left in the Inspector, and check what the name attribute is set to. Use Item / Extended to add a matching id attribute to the input itself, not the enclosing DIV if any.

Use Protaculous to add the following JavaScript code, and use Page / Extended or the External Stylesheets Action to add the following CSS.

http://www.pastie.org/1531732

Hope this helps,

Walter

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

10

Thanks Walter

I got it working use both the one line fix

var filter = $$('input[name="q"]').first();

And the full boona.

The difference being the Item Extended is not required with the one liner - but this is more Simple Site Search action specific.

It is probably more straightforward when there is no Simple Site Search action flung into the mix!

David

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