Displaying Facebook-Like Search Inputs
December 24, 2007
As an avid Facebook user, you may have noticed that search fields throughout the website have a standard format. These typically include a magnifying glass icon displayed within the left side, a specific font family and text size, and so on. If you are not aware, it’s possible to utilize this formatting for the text input elements within your own Facebook applications as well.
This simple change can be done by simply including the Facebook-defined “inputtext” and “inputsearch” CSS classes in your input tag. It is important to note that the “inputsearch” class name should be referenced after the “inputtext” class name in order to have its styles override those defined prior. The following HTML code sample demonstrates the simplicity with which this can be performed.
<input name="keywords" type="text" class="inputtext inputsearch"/>
While the above solves the objective of creating a Facebook stylized input element, perhaps you want to add a bit of flare. You may be familiar with some websites that display a textual tip within an input element until the user enters something. Upon clicking the text input, the text will either be highlighted or cleared depending on the site’s functionality. Here you’ll learn to do both.
The former of these two methods, which involves highlighting the default text, is the easier of the two. This can be accomplished by placing some JavaScript into the input’s focus event such that the browser knows to highlight the text. The following example demonstrates how this can be done.
<input name="keywords" type="text" class="inputtext inputsearch" onfocus="this.select();" value="Click to type"/>
The latter of the two methods — clearing the text, which can be seen below — is a bit more difficult to achieve. It involves creating one simple reusable function for each of the input’s focus and blur events. In addition, this tutorial will demonstrate how to change the text layout such that will help trigger the user into recognizing whether or not the text field needs to be edited. In this example, only the text color will be changed for the sake of simplicity.
Since you’ll want to be able to reference the the default, or “blank”, input value from both the JavaScript and the PHP (in defining the input elements) and the JavaScript, you’ll need to declare a string constant for this value. This can easily be done using the PHP define function, as per the below line of code.
<?php define('BLANK_INPUT', 'Click to type');?>
Next you’ll want to define some standard CSS used for defining the layout of an input element when it is considered empty. Included are some additional CSS classes to help provide a professional-looking layout; however, they are not required for this demonstration to function as expected.
<style type="text/css">
input.inputblank { color:#999; } /* class to use for blank input */
fieldset { border:0px; margin:1em; clear:both; }
fieldset div.input label { float:left; clear:left; margin-right:5px; width:100px; text-align:right; }
fieldset div.input input { float:left; width:200px; margin-bottom:0.25em; }
fieldset div.submit input { float:left; clear:left; margin-left:105px; }
</style>
The next step is to define the JavaScript functions. These functions are used for determining whether the input element is equal to the default text, in which case it will be cleared on focus (when clicked on) or reset on blur (when clicked elsewhere on the page). In addition, the functionality defined here assumes that whitespace is the equivalent of no text entered. As such, an additional function has been included to trim strings.
<script type="text/javascript"><!--
const BLANK_INPUT = '<?php echo addslashes(BLANK_INPUT);?>';
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
function clearInput(e, compare) {
e.removeClassName('inputblank'); // remove grayed out color
if (e.getValue() == compare) {
e.setValue(''); // clear default text when clicked
}
}
function restoreInput(e, value) {
if (trim(e.getValue()) == '') {
e.setValue(value); // reset default text when unclicked
e.addClassName('inputblank'); // display grayed out color
}
}
//--></script>
Finally, create your HTML form. Take note of the focus and blur event definitions for the search element. This is where the action happens!
<form action="?search"> <fieldset> <div class="input"> <label>Keywords:</label> <input name="keywords" type="text" class="inputtext inputsearch inputblank" onfocus="clearInput(this, BLANK_INPUT);" onblur="restoreInput(this, BLANK_INPUT);" value="<?php echo BLANK_INPUT;?>"/> </div> <div class="submit"> <input type="submit" class="inputbutton inputsubmit" value="Search"/> <div> </fieldset> </form>
In case you had any trouble following the steps from above, here’s what your final code should look like.
<?php define('BLANK_INPUT', 'Click to type');?>
<style type="text/css">
input.inputblank { color:#999; } /* class to use for blank input */
fieldset { border:0px; margin:1em; clear:both; }
fieldset div.input label { float:left; clear:left; margin-right:5px; width:100px; text-align:right; }
fieldset div.input input { float:left; width:200px; margin-bottom:0.25em; }
fieldset div.submit input { float:left; clear:left; margin-left:105px; }
</style>
<script type="text/javascript"><!--
const BLANK_INPUT = '<?php echo addslashes(BLANK_INPUT);?>';
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
function clearInput(e, compare) {
e.removeClassName('inputblank'); // remove grayed out color
if (e.getValue() == compare) {
e.setValue(''); // clear default text when clicked
}
}
function restoreInput(e, value) {
if (trim(e.getValue()) == '') {
e.setValue(value); // reset default text when unclicked
e.addClassName('inputblank'); // display grayed out color
}
}
//--></script>
<form action="?search">
<fieldset>
<div class="input">
<label>Keywords:</label>
<input name="keywords" type="text" class="inputtext inputsearch inputblank" onfocus="clearInput(this, BLANK_INPUT);" onblur="restoreInput(this, BLANK_INPUT);" value="<?php echo BLANK_INPUT;?>"/>
</div>
<div class="submit">
<input type="submit" class="inputbutton inputsubmit" value="Search"/>
<div>
</fieldset>
</form>
If your application will include will include search input elements that follow the above example within multiple pages of your application, it is recommended that you look into including your JavaScript from an external file.
Comments
2 Responses to “Displaying Facebook-Like Search Inputs”
Got something to say?
How do you find what styles to apply to button to make them look like Facebook styles. Is it just using firebug or is there a resource out there that document these styles.
As far as I’m aware, there is no resource other than asking others in the forum. I use Firebug myself, it’s an excellent learning tool even beyond the Facebook Platform.