Geek Answers Handbook

Clear search box when clicking small “x” inside it

I am working on a search form for the tumblr theme. I am wondering if there is any simple JavaScript, CSS or jQuery solution when clicking on the small small "x" image inside the text box removes the form? An example of this is on apple.com. Here is the search code I'm working with:

<form id="search" action="/search"> <p> <input type="text" name="q" placeholder="Search&hellip;" /> </p> </form>
+4
source share
6 answers

Actually it is NOT INSIDE ...

Try the following:

 <span class="search"><img src=lookup><input type=text ><span>x</span></span>

with style:

 span.search { display:inline-block; border:1px solid black; border-radius:0.5em; -webkit-border-radius: 0.5em; } span.search > input { background: none; border: none; }
+6
source

To extend kingjv's solution, this is a simple plugin:
http://jsfiddle.net/PvFSF/

 (function ($, undefined) { $.fn.clearable = function () { var $this = this; $this.wrap('<div class="clear-holder" />'); var helper = $('<span class="clear-helper">x</span>'); $this.parent().append(helper); helper.click(function(){ $this.val(""); }); }; })(jQuery);

$ ("# myInput") Disposable () ;.

+6
source

This is just a css trick. If you see apple.com, what they do is put an image to delete after the text, but it seems to be inside. Here you have the code to achieve this effect:

 <style> #searchContainer{ border-width: 1px; border-style: solid; display: inline; } #q{ border: none; } </style> <script> $(document).ready(function(){ $("#clear").click(function(){ $("#q").val(""); //Clear the text input }); }); </script> <form id="search" action="/search"> <p> <div id="searchContainer"> <input type="text" name="q" id="q" /> <span id="clear">x</span> <!-- You can use an image here instead --> </div> </p> </form>

Tested and working :)
Hope this helps. Greetings

+3
source

If you look at the source of the Apple site, you will see that their search text box is a div, a text box, then another div. These are these external divs that hold things like x to clear it.

0
source

You can do something like this:

http://jsfiddle.net/nByBB/

may want to make it a little better, but it illustrates the idea.

0
source

using css, enter the input field on the right, say 20px. Then make an image (X) [and let your image be 20 pixels wide and called clear.png], enable <img class="clearingImage" src="/imagepath/clear.png" style="position:relative;left:-20px;" /> <img class="clearingImage" src="/imagepath/clear.png" style="position:relative;left:-20px;" /> right after your tag and then in javascript block you will say

 $('img.clearingImage').click(function () { $(this).prev().val(''); });

keeping in mind that the image is on the same line immediately after the input tag

0
source

More articles:


All Articles