javascript - 如何在输入小部件中放置 x 以清除内容？

Question

使用 twitter bootstrap 可以非常直接地创建一个搜索样式的输入小部件:

x 也可以通过 Twitter bootstrap 实现，但是将 x 定位在该位置需要一些 CSS 微调。

我设法让 x 处于那个位置，但它不是很可靠。通过响应式设计和不同的分辨率，x 被完全取代。

.filter-close {
    float: none;
    position: relative;
    left: 5em;
    top: 1.25em;
    z-index: 3;
}

<form action="." method="get" class="form-search">
 <a class="close filter-close" href="#">x</a>                                           
    <div class="input-append">                  
        {{filter_form.last_name}}<button type="submit" class="btn"><i class='icon-filter'> </i></button>                </div>                          
</form>

在尝试重新发明轮子之前，是否有任何现有的 javascript 库可以将输入转换为带有 x 按钮的输入？为此目的，像 Chosen.js 这样的东西？或者有什么建议可以更好地做到这一点？

非常感谢，

Answer 1

查看 this post

This fiddle基本上做你想做的事。

您正朝着正确的方向前进。