搜索文本框上是否有清除按钮？ [英] Is there something ready for a Clear button on search textbox?

问题描述

我想在我的应用程序的搜索文本框中添加一个清除按钮。有没有准备好的Ajax扩展器或JQuery功能来实现它？

在此先感谢。 解决方案

没有任何东西可以用来创建类似的东西，不需要额外的HTML，一些CSS magic 和jQuery绑定事件。

我添加了一些HTML，一些CSS和最小的Javascript，并注释掉了可以实现的代码，以便按预期工作。

结果代码

我的例子使用这个HTML

 < input type =textname =searchid =searchvalue =我可以清除/><！ -  
  - >< a href =search / clearid =clear>清除结果< / a> 
  

如果您在输入后立即添加了定位标记，则可以轻松地省略用于删除空间的注释在内联元素之间。

然后，CSS使用负边距定位链接，以便在文本输入框中显示。这不是真的在里面，因为输入不是一个容器。 这只是一个视觉技巧。

对于其他代码，只需检查 JSFiddle示例。

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.

解决方案

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.

这篇关于搜索文本框上是否有清除按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！