Is there something ready for a Clear button on search textbox?

Question

I want to add a clear button to the search textbox in my application. Is there a ready Ajax extender or a JQuery functionality to implement that?

Thanks in advance.

Answer 1

There's nothing out of the box, but it's easy to create something like this using no extra HTML, some CSS magic and jQuery to bind events.

I've added a bit of HTML, a bit of CSS and the smallest bit of Javascript with commented out code that you can implement in order for it to work as expected.

Resulting code

My example uses this HTML

<input type="text" name="search" id="search" value="I can be cleared" /><!--
--><a href="search/clear" id="clear">Clear results</a>

If you put anchor tag right after input, you can easily omit the comment which is used to remove space between inline elements.

CSS then positions the link with negative margins so it displays inside the text input box. It's not really inside because input is not a container. It's just a visual trick.

For the rest of code simply check JSFiddle example.

Answer 2

There is another more flexible "visual trick" you can use. You can place a textbox with no border inside a div with a border, then you can place anything you want around the textbox and it will appear to be inside the textbox.

Here is an example:

Here is the final markup, note this example uses and extends the Bootstrap framework:

<div class="composite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

For the full code check out the following post: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html