Textpattern CMS

#1 2007-11-15 20:53:00

scdoody

Member

Registered: 2006-10-18

Posts: 129

Search Field and Search Button

On my site, I am having trouble doing two things with my search area:

1. I want to pre-populate the search field with the word “Search” and then on click within that search box, the box becomes blank so the user can type in their search term.

2. I want to have a graphic of an arrow that I’ve made be displayed to the right of the search box – and use this as the submit button for the search.

Here is the code I have so far (I don’t have # 1 worked into it and I don’t know why # 2 is not working):

<txp:search_input label=”“ /><img src=“images/search-arrow.gif”>

Any help is appreciated!!

#2 2007-11-15 21:15:43

els

Moderator

From: The Netherlands

Registered: 2004-06-06

Posts: 7,458

Re: Search Field and Search Button

1. I am using something like this (so not the txp:search tag):

<form action="/search/" method="get"><label>Search<input id="search" name="q" value="Search" size="20"  onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" /></label></form>

Last edited by els (2007-11-15 21:16:46)

#3 2007-11-16 05:20:29

jm

Plugin Author

From: Missoula, MT

Registered: 2005-11-27

Posts: 1,746

Website

Re: Search Field and Search Button

Couple steps. Basically, you build the form manually. Use a button element instead of an input too.

<form action="<txp:site_url />" method="get">
	<fieldset>
		<legend>
			<label for="q">
				Search
			</label>
		</legend>
		<input id="q" name="q" type="text" />
		<button>
			<img alt="Submit" src="<txp:site_url />images/button.png" />
		</button>
	</fieldset>
</form>

For clearing, you could also use an external JavaScript function:

function search(id, terms) {
	if (!(document.getElementById(id) && document.getElementsByTagName('input'))) return;
	var input = document.getElementById(id);
	input.setAttribute('value', terms);

	input.onfocus = function() {
		this.value = (this.value == terms) ? '' : this.value;
	};

	input.onblur = function() {
		this.value = (this.value == '') ? terms : this.value;
	};
}

Place this somewhere in your head or in the external JS:

<script type="text/javascript" charset="utf-8">
	//<![CDATA[
		window.onload = function() {
			search('q', 'Type in your search terms.');
		};
	//]]>
</script>

If you’ve got multiple window.onload functions, add them in there, or use addLoadEvent.

Last edited by jm (2007-11-16 05:21:13)

---

What? My name is… | GitHub