¿Cómo borro un cuadro de búsqueda con una 'x' en bootstrap 3?

Tener algunos problemas con bootstrap, por lo que sería increíble ayuda. Gracias

Lo que me gustaría: (parte superior)

Mi código actual:

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

Captura de pantalla actual:

Para conseguir algo como esto

con Bootstrap 3 y Jquery use el siguiente código HTML:

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

y algo de CSS:

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

y Javascript:

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

Por supuesto, debe escribir más Javascript para cualquier funcionalidad que necesite, por ejemplo, para ocultar la 'x' si la entrada está vacía, realizar solicitudes Ajax, etc. Ver http://www.bootply.com/121508

Solución HTML 5 súper simple:

<input type="search" placeholder="Search..." />

Fuente: Tutorial HTML 5 - Tipo de entrada: Buscar

Eso funciona en al menos Chrome 8, Edge 14, IE 10 y Safari 5 y no requiere Bootstrap ni ninguna otra biblioteca. (Desafortunadamente, parece que Firefox aún no es compatible con el botón para borrar la búsqueda).

Después de escribir en el cuadro de búsqueda, aparecerá una 'x' en la que se puede hacer clic para borrar el texto. Esto seguirá funcionando como un cuadro de edición normal (sin el botón 'x') en otros navegadores, como Firefox, por lo que los usuarios de Firefox podrían seleccionar el texto y presionar eliminar, o ...

Si realmente necesita esta característica agradable compatible con Firefox, entonces puede implementar una de las otras soluciones publicadas aquí como un polyfill para los elementos de entrada [type = search]. Un polyfill es un código que agrega automáticamente una función de navegador estándar cuando el navegador del usuario no es compatible con la función. Con el tiempo, la esperanza es que pueda eliminar polyfills a medida que los navegadores implementen las funciones respectivas. Y en cualquier caso, una implementación de polyfill puede ayudar a mantener más limpio el código HTML.

Por cierto, otros tipos de entrada HTML 5 (como "fecha", "número", "correo electrónico", etc.) también se degradarán con gracia a un cuadro de edición simple. Algunos navegadores pueden ofrecerle un selector de fecha elegante, un control giratorio con botones arriba / abajo o (en teléfonos móviles) un teclado especial que incluye el signo '@' y un botón '.com', pero que yo sepa, todos los navegadores mostrará al menos un cuadro de texto sin formato para cualquier tipo de entrada no reconocido.

Solución Bootstrap 3 y HTML 5

Bootstrap 3 restablece una gran cantidad de CSS y rompe el botón de cancelación de búsqueda de HTML 5. Después de que se haya cargado el CSS de Bootstrap 3, puede restaurar el botón de cancelación de búsqueda con el CSS utilizado en el siguiente ejemplo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
</style>
<div class="form-inline">
  <input type="search" placeholder="Search..." class="form-control" />
</div>

Fuente: La entrada de búsqueda HTML 5 no funciona con Bootstrap

He probado que esta solución funciona en las últimas versiones de Chrome, Edge e Internet Explorer. No puedo probar en Safari. Desafortunadamente, el botón 'x' para borrar la búsqueda no aparece en Firefox, pero como arriba, se podría implementar un polyfill para los navegadores que no soportan esta función de forma nativa (es decir, Firefox).

Traté de evitar demasiado CSS personalizado y después de leer algunos otros ejemplos fusioné las ideas allí y obtuve esta solución:

<div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" ng-model="ctrl.searchService.searchTerm" ng-change="ctrl.search()" placeholder="Suche"/>
    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="ctrl.clearSearch()" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
</div>

Como no uso JavaScript de bootstrap, solo CSS junto con Angular, no necesito las clases has-clear y form-control-clear, e implementé la función clear en mi controlador AngularJS. Con JavaScript de bootstrap, esto podría ser posible sin su propio JavaScript.

Gracias sin cables, su solución fue muy limpia. Estaba usando formularios de arranque horizontal e hice un par de modificaciones para permitir un solo controlador y formulario css.

html: - ACTUALIZADO para usar los comentarios has-feedback y form-control-feedback de Bootstrap

 <div class="container">
  <form class="form-horizontal">
   <div class="form-group has-feedback">
    <label for="txt1" class="col-sm-2 control-label">Label 1</label>
    <div class="col-sm-10">
     <input id="txt1" type="text" class="form-control hasclear" placeholder="Textbox 1">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt2" class="col-sm-2 control-label">Label 2</label>
    <div class="col-sm-10">
      <input id="txt2" type="text" class="form-control hasclear" placeholder="Textbox 2">
      <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt3" class="col-sm-2 control-label">Label 3</label>
    <div class="col-sm-10">
     <input id="txt3" type="text" class="form-control hasclear" placeholder="Textbox 3">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>   
   </div>
  </form>
 </div>

javascript:

$(".hasclear").keyup(function () {
    var t = $(this);
    t.next('span').toggle(Boolean(t.val()));
});
$(".clearer").hide($(this).prev('input').val());
$(".clearer").click(function () {
    $(this).prev('input').val('').focus();
    $(this).hide();
});

ejemplo: http://www.bootply.com/130682

Respuesta de AngularJS / UI-Bootstrap

• Utilice la clase de comentarios de Bootstrap para mostrar un icono dentro del campo de entrada.
• Asegúrese de que el icono tenga style="cursor: pointer; pointer-events: all;"
• Úselo ng-clickpara borrar el texto.

JavaScript (app.js)

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  $scope.params = {};

  $scope.clearText = function() {
    $scope.params.text = null;
  }

});

HTML (fragmento de index.html)

      <div class="form-group has-feedback">
        <label>text box</label>
        <input type="text"
               ng-model="params.text"
               class="form-control"
               placeholder="type something here...">
        <span ng-if="params.text"
              ng-click="clearText()"
              class="glyphicon glyphicon-remove form-control-feedback" 
              style="cursor: pointer; pointer-events: all;"
              uib-tooltip="clear">
        </span>
      </div>

Aquí está el plunker: http://plnkr.co/edit/av9VFw?p=preview

Hágalo con estilos y secuencias de comandos en línea:

<div class="btn-group has-feedback has-clear">
    <input id="searchinput" type="search" class="form-control" style="width:200px;">
        <a 
id="searchclear" 
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear" 
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>

Aquí está mi solución de trabajo con búsqueda e ícono transparente para Angularjs \ Bootstrap con CSS.

    <div class="form-group has-feedback has-clear">
                    <input type="search" class="form-control removeXicon" ng-model="filter" style="max-width:100%" placeholder="Search..." />
                    <div ng-switch on="!!filter">
                        <div ng-switch-when="false">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                        <div ng-switch-when="true">
                            <span class="glyphicon glyphicon-remove-sign form-control-feedback" ng-click="$parent.filter = ''" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></span>
                        </div>
                    </div>                        
                </div>

------

CSS

/* hide the built-in IE10+ clear field icon */
.removeXicon::-ms-clear {
  display: none;
}

/* hide the built-in chrome clear field icon */
.removeXicon::-webkit-search-decoration,
.removeXicon::-webkit-search-cancel-button,
.removeXicon::-webkit-search-results-button,
.removeXicon::-webkit-search-results-decoration { 
      display: none; 
}

No se vincule a la identificación del elemento, solo use el elemento de entrada 'anterior' para borrar.

CSS:

.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

Javascript:

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

Marcado HTML, use todo lo que quiera:

<div class="clear-input">
    Pizza: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

<div class="clear-input">
    Pasta: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

Coloque la imagen (icono de cancelación) con la posición absoluta, ajuste las propiedades superior e izquierda y llame al método onclick evento que borra el campo de entrada.

<div class="form-control">
    <input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>

En css, coloque el intervalo en consecuencia,

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}