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

Question

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

提前致谢。

Answer 1

没有什么是开箱即用的，但是使用没有额外的HTML，一些CSS magic 和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 example。

Answer 2

您可以使用另一种更灵活的“视觉技巧”。您可以在带边框的div中放置一个没有边框的文本框，然后您可以在文本框周围放置任何您想要的内容，它将显示在文本框内。

以下是一个例子：

这是最终的标记，注意这个例子使用并扩展了Bootstrap框架：

<div class="composite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

有关完整代码，请查看以下帖子：http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html