In this recipe, let's see how to create a search box in ASP.NET with some default information
text. The text is displayed only when the search box is out of focus.
Getting ready 1. Add a new web form Recipe1.aspx to the current project.
2. Add a TextBox field with a Search button to the form as below:
.defaultText { font-style:italic;
color:#CCCCCC; }
How to do it…
1. In the document.ready() function, retrieve the TextBox control using its ClientID
and save in a local variable:
var searchBox = $('#<%=TextBox1.ClientID%>') ;
2. On the focus event, check if it contains the default text:
searchBox.focus( function() {
if (searchBox.val() == this.title) {
The ToolTip property of the ASP.NET TextBox control is rendered
as title at runtime. Thus, the ToolTip text Enter your search keyword here is retrieved using this.title.
3. If yes, then remove the defaultText css style:searchBox.removeClass("defaultText");
4. Also clear the search field:
searchBox.val("");
} }); 5. On the blur event, check if the TextBox is empty:
searchBox.blur( function() {
if (searchBox.val() == "") {
6. If yes, then attach the "defaultText" css style:
searchBox.addClass("defaultText");
7. Add the default information text to the search field:
searchBox.val(this.title); } });
8. Call the blur event on page load so that the TextBox is initially out of focus:
searchBox.blur();
[code]
Getting ready 1. Add a new web form Recipe1.aspx to the current project.
2. Add a TextBox field with a Search button to the form as below:
.defaultText { font-style:italic;
color:#CCCCCC; }
and save in a local variable:
var searchBox = $('#<%=TextBox1.ClientID%>') ;
2. On the focus event, check if it contains the default text:
searchBox.focus( function() {
if (searchBox.val() == this.title) {
The ToolTip property of the ASP.NET TextBox control is rendered
as title at runtime. Thus, the ToolTip text Enter your search keyword here is retrieved using this.title.
3. If yes, then remove the defaultText css style:searchBox.removeClass("defaultText");
4. Also clear the search field:
searchBox.val("");
} }); 5. On the blur event, check if the TextBox is empty:
searchBox.blur( function() {
if (searchBox.val() == "") {
6. If yes, then attach the "defaultText" css style:
searchBox.addClass("defaultText");
7. Add the default information text to the search field:
searchBox.val(this.title); } });
8. Call the blur event on page load so that the TextBox is initially out of focus:
searchBox.blur();
[code]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
$(document).ready(function() {
var searchBox = $('#<%=TextBox1.ClientID%>');
searchBox.focus(
function() {
if (searchBox.val() == this.title) {
searchBox.removeClass("defaultText");
searchBox.val("");
}
});
searchBox.blur(
function () {
if (searchBox.val() == "") {
searchBox.addClass("defaultText");
searchBox.val(this.title);
}
});
searchBox.blur();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="height: 80px; width: 400px;">
<asp:textbox cssclass="defaultText" id="TextBox1" runat="server" tooltip="Enter your search keyword here" width="200px"></asp:textbox>
<asp:button id="btnSubmit" runat="server" text="SEARCH">
</asp:button>
</fieldset>
</div>
</form>
</body>
</html>
[/code]
