javascript - ¿Cómo posicionar una x en un widget de entrada para borrar el contenido?

Con Twitter Bootstrap, es bastante sencillo crear un widget de entrada al estilo de búsqueda:

También la x se puede hacer con Twitter Bootstrap, pero ubicar la x en ese lugar requiere un ajuste fino de CSS.

Logré colocar la x en esa posición, pero no es muy confiable. Con un diseño adaptable y diferentes resoluciones, la x se desplaza completamente.

.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>

Antes de intentar reinventar la rueda, ¿existe alguna biblioteca de JavaScript que pueda convertir un campo de entrada en un campo de entrada con un botón de 'x'? ¿Algo como Chosen.js para este propósito? ¿O algún consejo sobre cómo podría hacer esto de una mejor manera?

Muchas gracias,

Respuesta #1

Mira esta publicación

Este fiddle básicamente hace lo que estás buscando hacer.

Vas en la dirección correcta.

Respuesta #2

Con algunos cambios en parte del código de Bootstrap y un poco de JavaScript, puedes lograr esto; de hecho, puedes colocar cualquier control que desees dentro del cuadro de texto. Aquí hay un ejemplo:

Y aquí está el marcado final utilizado para generarlo:

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

Para ver el código completo, consulta esta publicación: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html