jquery - 搜索文本框上的清除按钮是否已准备就绪？

Question

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

提前致谢。

Answer 1

没有开箱即用的东西，但是很容易创建这样的东西，不需要额外的 HTML、一些 CSS 魔法 和 jQuery 来绑定(bind)事件。

我已经添加了一些 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>

如果在输入后立即放置 anchor 标记，则可以轻松省略用于删除行内元素之间空格的注释。

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

对于其余代码，只需检查 JSFiddle example .