I'm using MVC, not that it matters, but I have a text box to search for.
<% using (Html.BeginForm("Index", "Search", FormMethod.Post)) { %>
<%= Html.AntiForgeryToken() %>
<div id="search_box">
<span id="search-title">Search Site</span>
<div>
<%= Html.TextBox("searchText", "type here, then press enter", new { @class = "search_input" }) %>
</div>
</div>
<% } %>
I used to have the onblur and onfocus events set in this text box to do some transcoding of the text when the user clicked on it or out of it without typing anything. But I moved them to a JS file, because in the end we want to add other functions through JS, such as autocomplete, etc.
The problem with my JS is that it represents anything.
var searchHandler = function() {
var searchBox = "searchText";
var defaultText = "type here, then press enter";
var attachEvents = function() {
$("#" + searchBox).focus(function() {
if (this.value == defaultText) {
this.value = '';
}
}).blur(function() {
if (this.value == '') {
this.value = defaultText;
}
}).keyup(function(event) {
var searchTerms = $("#" + searchBox).val();
if (event.keyCode == 13 && searchTerms == '') {
return false;
}
else {
return true;
}
});
};
return {
init: function() {
$("#" + searchBox).val(defaultText)
attachEvents();
}
}
} ();
$().ready(function() {
searchHandler.init();
});
I really just need to make enter not submit the form if the text field is empty. Any ideas?