Skip to content

Instantly share code, notes, and snippets.

@pixelhandler

pixelhandler/index.html

Created November 6, 2010 19:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pixelhandler/665652 to your computer and use it in GitHub Desktop.
Save pixelhandler/665652 to your computer and use it in GitHub Desktop.
Download ZIP
searchText() jQuery plugin to add helper text in search input. This jQuery plugin script added text to an input field in a search form. The defaults are set to the IDs used in a WordPress search form. The behavior can be set to force clearing of text ever
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML for .searchText() jQuery Plugin, custom helper text input value</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>.searchText() jQuery Plugin, adding search helper text / behavior</h1>
<ol>
<li>
<p><strong>Default options</strong>, &quot;Search&quot; text added to input&hellip;</p>
<form action="#" method="get" accept-charset="utf-8" id="defaultform">
<input type="text" name="s" value="" id="d" />
<input type="submit" val="submit" name="submit" />
</form>
</li>
<li>
<p>Extend default options, forcing text to <strong>reset upon re-entry</strong>&hellip;</strong></p>
<form action="#" method="get" accept-charset="utf-8" id="searchform">
<input type="text" name="s" value="" id="s" />
<input type="submit" val="submit" name="submit" />
</form>
</li>
<li>
<p>Extend default options, with <strong>custom helper</strong> text&hellip;</p>
<form action="#" method="get" accept-charset="utf-8" id="findform">
<input type="text" name="s" value="" id="f" />
<input type="submit" val="submit" name="submit" />
</form>
</li>
<li>
<p>Extend default options, with <strong>helperText</strong> and <strong>forceReset</strong> options&hellip;</p>
<form action="#" method="get" accept-charset="utf-8" id="whereform">
<input type="text" name="s" value="" id="w" />
<input type="submit" val="submit" name="submit" />
</form>
</li>
</ol>
<h2>Unit Tests</h2>
<p><a href="unitTests.html">Click to run tests with QUnit!</a></p>
<script src="jquery.htmlsrc.searchText.js"></script>
<script type="text/javascript" charset="utf-8">
(function($){
// 1. Extend default options
$('#defaultform').searchText({
inputId : '#d'
});
// 2. Extend default options, forcing field to reset upon re-entry
// was already in the jquery.htmlsrc.searchText.js file
// 3. Extend default options, with custom helper text
$('#findform').searchText({
helperText : 'Find something...',
inputId : '#f'
});
// 4.
$('#whereform').searchText({
helperText : 'where is...',
inputId : '#w',
forceReset : true
});
})(this.jQuery);
</script>
</body>
</html>
Raw
jquery.htmlsrc.searchText.js
(function($) {
/**
* .searchText()
* add some helper text to search input field
*/
$.fn.searchText = function(options) {
var defaults = {
helperText : 'Search',
inputId : '#s',
forceReset : false
};
var opts = $.extend({},defaults, options);
return this.each(function() {
// write helper text inside input field
$(opts.inputId).bind('blur', {msg: opts.helperText}, function(event){
// $.log(event.type + " : " + event.target.id + " : " + event.data.msg);
var _self = $(this);
if (_self.val() === '') {
_self.val(event.data.msg);
}
return false;
}).bind('focus', {msg: opts.helperText}, function(event){
var _self = $(this);
if (opts.forceReset || _self.val() === event.data.msg) {
// clear search input form
_self.val('');
}
return false;
}).trigger('blur');
});
};
})(jQuery);
// Use the plugin in your document ready block
// Use plugin when WordPress search form id is present
// - $('#searchform').searchText();
// Call plugin with option to force reseting the text on focus
$('#searchform').searchText({
helperText : 'Search',
inputId : '#s',
forceReset : true
});
Raw
tests.js
// documentation on writing tests here: http://docs.jquery.com/QUnit
// source : https://github.com/jquery/qunit
// global var htmlsrc for namespace
if (!window.htmlsrc) {var htmlsrc = {};}
/*
* .searchText() testing user interaction with form input behaviors
*/
/* namespace */
module('namespace check');
test('is htmlsrc a global variable',function(){
expect(1);
ok( window.htmlsrc, 'htmlsrc namespace is present');
});
/* fixture */
htmlsrc.testMarkup = '#qunit-fixture';
module(".searchText() jQuery Plugin", {
setup: function() {
htmlsrc.testForm = '<form action="submit" method="get" accept-charset="utf-8" id="searchform"><input type="text" name="s" value="" id="s" /><input type="submit" val="&rarr;" name="submit" /></form>';
},
teardown: function() {
$(htmlsrc.testMarkup).empty();
}
});
test("Search form value empty prior to using searchText plugin", function() {
// Arrange
var _Form, _Selector, _Value;
_Form = $(htmlsrc.testForm).appendTo(htmlsrc.testMarkup);
// Act
_Selector = 'input[type="text"]';
_Value = $(_Selector,_Form).val();
// Assert
expect(1);
same(_Value,"", "text input field should have be empty, value is empty string");
});
test("searchText jQuery Plugin With No Parameters", function() {
// Arrange
var _Form, _Selector, _Value = {};
_Form = $(htmlsrc.testForm).appendTo(htmlsrc.testMarkup);
// Act
_Form.searchText();
_Selector = 'input[type="text"]';
_Value.a = $(_Selector, _Form).val();
_Value.b = $(_Selector, _Form).focus().val();
_Value.c = $(_Selector, _Form).focus().blur().val();
$(_Selector, _Form).blur();
_Value.c = $(_Selector, _Form).val();
// Assert
expect(3);
same(_Value.a, "Search", "text input field should have the text 'Search'");
same(_Value.b, "", "text input field should not have any text on focus event");
same(_Value.c, "Search", "text 'Search' is devault after blur event");
});
test("searchText jQuery Plugin With helperText Parameter", function() {
// Arrange
var _Form, _Selector, _Value = {};
_Form = $(htmlsrc.testForm).appendTo(htmlsrc.testMarkup);
_Selector = 'input[type="text"]';
// Act
_Form.searchText({
helperText : "Search our site..."
});
// get values at different stages of user interaction with text input field
_Value.a = $(_Selector, _Form).val();
// simulate user entering text within input field
$(_Selector, _Form).focus();
_Value.b = $(_Selector, _Form).val();
$(_Selector, _Form).val("find it please");
// simulate user leaving input field
$(_Selector, _Form).blur();
_Value.c = $(_Selector, _Form).val();
// simulate user re-entering input
$(_Selector, _Form).focus();
_Value.d = $(_Selector, _Form).val();
// Assert
expect(4);
same(_Value.a, "Search our site...", "text input field should have the custom text 'Search our site...'");
same(_Value.b, "", "text input field should not have any text on focus event");
same(_Value.c, "find it please", "new text value is kept after blur event");
same(_Value.d, "find it please", "new text value is not reset after re-entering input field");
});
test("searchText jQuery Plugin With forceReset Parameter", function() {
// Arrange
var _Form, _Selector, _Value = {};
_Form = $(htmlsrc.testForm).appendTo(htmlsrc.testMarkup);
_Selector = 'input[type="text"]';
// Act
_Form.searchText({
forceReset : true
});
// get values at different stages of user interaction with text input field
_Value.a = $(_Selector, _Form).val();
// simulate user entering text within input field
$(_Selector, _Form).focus();
_Value.b = $(_Selector, _Form).val();
$(_Selector, _Form).val("I am looking for cheese");
// simulate user leaving input field
$(_Selector, _Form).blur();
_Value.c = $(_Selector, _Form).val();
// simulate user re-entering input
$(_Selector, _Form).focus();
_Value.d = $(_Selector, _Form).val();
// Assert
expect(4);
same(_Value.a, "Search", "text input field should have the default text 'Search'");
same(_Value.b, "", "text input field should not have any text on focus event");
same(_Value.c, "I am looking for cheese", "new text value is kept after blur event");
same(_Value.d, "", "new text value is forced to reset after re-entering (focus) input");
});
Raw
unitTests.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>QUnit Tests for .searchText() jQuery Plugin</title>
<link rel="stylesheet" href="https://github.com/jquery/qunit/raw/master/qunit/qunit.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
<script src="jquery.htmlsrc.searchText.js"></script>
<script src="tests.js"></script>
</head>
<body class="flora">
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment