13

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?

enter image description here

Thanks in advance.

Community
  • 1
  • 1
Homam
  • 23,263
  • 32
  • 111
  • 187
  • What do you require when you'd click the X? clear your search box or clear your page? or anything else? And if you provide the URL of the page where you've captured your screenshot we could see whether x is *inside* a textbox or are they both contained in an outer container with borders as if it was a textbox. – Robert Koritnik Apr 23 '11 at 08:56
  • Yes, clear the textbox with an event if it's available to refresh the result set – Homam Apr 23 '11 at 08:57
  • Are you using `UpdatePanel` (because by the tags I suppose you're using Asp.net WebForms) – Robert Koritnik Apr 23 '11 at 08:58
  • No, there is not. And even though, the find button is a server side control. So, don't worry even it's pure client side. – Homam Apr 23 '11 at 09:00
  • Try this: `` and open that html file in Chrome. – Ketan Modi Apr 23 '11 at 09:29
  • 1
    This question was asked before, but please check this other, which asks the same and has amazing answer: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text – spuas Oct 08 '14 at 17:14

2 Answers2

20

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.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
3

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:

enter image description here

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

Luis Perez
  • 27,650
  • 10
  • 79
  • 80