Simple Search default text?

Hello.

Can I put some default text inside the simple_search() box? I know I can change the $buttonText, but I would like to actually put some text inside the box. For example, "quick search" and have it go away at :focus

Thank -- Erin

Erin,

One way at it might be to get hacky with the javascript. Somewhere after you echo out the searchbox with simple_searchbox(), try putting this javascript in as well:

<?php echo "<script>
var searchBox = document.getElementById('search');
searchBox.value = 'quick search';
searchBox.setAttribute('onclick' , 'searchBox.value = null' );		

</script>";
?>

Ooops, forgot to mention that I always worry about cross browser issues with stuff like this. No guarantees that it will work across them all!

Patrick

We do somethign similar to what Patrick suggested on our search box for Omeka.org. I used a nice little jQuery plugin that Zac Gordon wrote called Input Field Hints.

There is currently no way, using the simple_search() helper, to pass an option to set the default value of the text input, but we can look into options for doing that.

I tried Patrick's suggestion and it worked nicely in all browsers except Opera and IE (displayed 'null' as string), but unfortunately I need to be IE-centered for this, so I tried Jeremy's suggestion as follows, but I'm not sure I got it right since it didn't take.

<?php echo "<script>
			//Plugin to add text to an input field that disappears on focus
jQuery.fn.inputFieldText = function(string) {
    this.each(function() {
        $(this).val(string);
        $(this).focus(function(){
            if ($(this).val() == string){
                $(this).val('');
            }
        });
        $(this).blur(function(){
            if ($(this).val() == '' ){
                $(this).val(string);
            }
        });
    });
} 

			var searchBox = document.getElementById('search');
			searchBox.value = '  quick search';
			searchBox.setAttribute('class' , 'quicksearch');
			$(‘input[search]’).inputFieldText(‘’);
			</script>";
?>

I basically know nothing about Javascript, so i apologize if this is tedious. Any help will be greatly appreciated.

thanks -- Erin

Hi Erin,

You have to do a few things:

1) Include the jQuery library in your theme. You can download this from http://jquery.com/

2) Create a new file called jquery-inputfieldtext.js (or something) and paste that plugin code that Zac wrote. Or, you can save and upload the file I made for Omeka.org here: http://omeka.org/ui/j/jquery-inputfieldtext.js

3) Apply that plugin code to your specific search field, using either an external javascript file or by adding the following code to your header.php file:

<script type="text/javascript">
$(function(){	

    $('#simple-search input[type=text]').inputFieldText('Enter keywords', 'hint');

});
</script>

jQuery has some great tutorials for using its library and various plugins on their Tutorials page.

Hope this helps!
Jeremy