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?

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

Clear results

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.