搜索文本框上有清除按钮的内容吗？

Question

我想在我的应用程序中为搜索文本框添加一个清除按钮.是否有现成的Ajax扩展程序或JQuery功能来实现它？

提前致谢.

Answer 1

没有什么是开箱即用的,但是使用没有额外的HTML,一些CSS 魔法和jQuery来绑定事件很容易创建这样的东西.

我添加了一些HTML,一些CSS和最小的Javascript,带有注释掉的代码,您可以实现它以使其按预期工作.

结果代码

我的示例使用此HTML

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

如果在输入后立即放置锚标记,则可以轻松省略用于删除内联元素之间空间的注释.

然后CSS使用负边距定位链接,使其显示在文本输入框内.它不是真的在里面因为输入不是容器.这只是一个视觉技巧.

对于其余代码,只需检查JSFiddle示例.