From 540e1f3fb8ea429452a7184551cb8a19cd7b73ab Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 5 Oct 2010 23:54:51 -0400
Subject: [PATCH] added a "clear" button to search input types

---
 css/jQuery.mobile.forms.textinput.css |  4 +++-
 js/jQuery.mobile.forms.textinput.js   | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/css/jQuery.mobile.forms.textinput.css b/css/jQuery.mobile.forms.textinput.css
index 96fe606c..d89616b1 100644
--- a/css/jQuery.mobile.forms.textinput.css
+++ b/css/jQuery.mobile.forms.textinput.css
@@ -6,8 +6,10 @@
 label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
 input.ui-input-text, textarea.ui-input-text { padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 95%; }
 textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
-.ui-input-search { margin: 5px; padding: 0 0 0 30px; background-position: 6px 50%; background-repeat: no-repeat; }
+.ui-input-search { margin: 5px; padding: 0 30px; background-position: 8px 50%; background-repeat: no-repeat; position: relative; }
 .ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
+.ui-input-search .ui-input-clear { position: absolute; right: 8px; top: 50%; margin-top: -12px; }
+.ui-input-search .ui-input-clear-hidden { display: none; }
 
 /* orientation adjustments - incomplete!*/
 @media screen and (min-width: 480px){ 
diff --git a/js/jQuery.mobile.forms.textinput.js b/js/jQuery.mobile.forms.textinput.js
index e6baf85f..995c25e3 100644
--- a/js/jQuery.mobile.forms.textinput.js
+++ b/js/jQuery.mobile.forms.textinput.js
@@ -19,8 +19,30 @@ jQuery.fn.customTextInput = function(options){
 		input.addClass('ui-input-text');
 		
 		var focusedEl = input;
+		
+		//"search" input widget
 		if(o.search){
 			focusedEl = input.wrap('<div class="ui-input-search ui-btn-corner-all ui-body-c ui-btn-shadow ui-icon-search"></div>').parent();
+			var clearbtn = $('<a href="#" class="ui-input-clear" title="clear text">clear text</a>')
+				.buttonMarkup({icon: 'delete', iconpos: 'notext', corners:true, shadow:true})
+				.click(function(){
+					input.val('');
+					toggleClear();
+					return false;
+				})
+				.appendTo(focusedEl);
+			
+			function toggleClear(){
+				if(input.val() == ''){
+					clearbtn.addClass('ui-input-clear-hidden');
+				}
+				else{
+					clearbtn.removeClass('ui-input-clear-hidden');
+				}
+			}
+			
+			toggleClear();
+			input.keyup(toggleClear);	
 		}
 		else{
 			input.addClass('ui-corner-all ui-body-c');