Como faço para limpar uma caixa de pesquisa com um 'x' no bootstrap 3?

Tendo alguns problemas com o bootstrap, então alguma ajuda seria incrível. obrigado

O que eu gostaria: (parte superior)

Meu código atual:

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

Captura de tela atual:

Para conseguir algo assim

com Bootstrap 3 e Jquery, use o seguinte 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>

e algum CSS:

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

e Javascript:

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

É claro que você precisa escrever mais Javascript para qualquer funcionalidade necessária, por exemplo, para ocultar o 'x' se a entrada estiver vazia, fazer solicitações Ajax e assim por diante. Veja http://www.bootply.com/121508

Solução HTML 5 super simples:

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

Fonte: Tutorial HTML 5 - Tipo de entrada: Pesquisa

Isso funciona pelo menos no Chrome 8, Edge 14, IE 10 e Safari 5 e não requer Bootstrap ou qualquer outra biblioteca. (Infelizmente, parece que o Firefox ainda não oferece suporte ao botão de limpar a pesquisa.)

Depois de digitar na caixa de pesquisa, um 'x' aparecerá, que pode ser clicado para limpar o texto. Isso ainda funcionará como uma caixa de edição comum (sem o botão 'x') em outros navegadores, como o Firefox, portanto, os usuários do Firefox podem selecionar o texto e pressionar excluir ou ...

Se você realmente precisa que este recurso bom de ter suporte no Firefox, então você pode implementar uma das outras soluções postadas aqui como um polyfill para elementos de entrada [type = search]. Um polyfill é um código que adiciona automaticamente um recurso padrão do navegador quando o navegador do usuário não oferece suporte ao recurso. Com o tempo, a esperança é que você consiga remover polyfills à medida que os navegadores implementam os respectivos recursos. E, em qualquer caso, uma implementação de polyfill pode ajudar a manter o código HTML mais limpo.

A propósito, outros tipos de entrada HTML 5 (como "data", "número", "e-mail", etc.) também degradam normalmente para uma caixa de edição simples. Alguns navegadores podem fornecer um seletor de data sofisticado, um controle giratório com botões para cima / para baixo ou (em telefones celulares) um teclado especial que inclui o sinal '@' e um botão '.com', mas que eu saiba, todos os navegadores mostrará pelo menos uma caixa de texto simples para qualquer tipo de entrada não reconhecido.

Solução Bootstrap 3 e HTML 5

O Bootstrap 3 redefine muitos CSS e quebra o botão de cancelar pesquisa do HTML 5. Depois que o CSS do Bootstrap 3 for carregado, você pode restaurar o botão de cancelamento da pesquisa com o CSS usado no exemplo a seguir:

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

Fonte: HTML 5 A entrada de pesquisa não funciona com bootstrap

Testei se essa solução funciona nas versões mais recentes do Chrome, Edge e Internet Explorer. Não consigo testar no Safari. Infelizmente, o botão 'x' para limpar a pesquisa não aparece no Firefox, mas como acima, um polyfill pode ser implementado para navegadores que não suportam esse recurso nativamente (por exemplo, Firefox).

Tentei evitar muito CSS customizado e depois de ler alguns outros exemplos, mesclei as ideias lá e encontrei esta solução:

<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 não uso o JavaScript do bootstrap, apenas o CSS junto com o Angular, não preciso das classes has-clear e form-control-clear, e implementei a função clear no meu controlador AngularJS. Com o JavaScript do bootstrap, isso pode ser possível sem o próprio JavaScript.

Obrigado, sem fio, sua solução estava muito limpa. Eu estava usando formulários de bootstrap horizontais e fiz algumas modificações para permitir um único manipulador e css de formulário.

html: - ATUALIZADO para usar has-feedback e form-control-feedback do 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();
});

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

Resposta do AngularJS / UI-Bootstrap

• Use a classe has-feedback do Bootstrap para mostrar um ícone dentro do campo de entrada.
• Certifique-se de que o ícone style="cursor: pointer; pointer-events: all;"
• Use ng-clickpara limpar o 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 (index.html snippet)

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

Aqui está o plunker: http://plnkr.co/edit/av9VFw?p=preview

Faça isso com scripts e estilos embutidos:

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

Aqui está minha solução de trabalho com pesquisa e ícone claro para Angularjs \ Bootstrap com 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; 
}

Não vincule ao ID do elemento, apenas use o elemento de entrada 'anterior' para limpar.

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();
    });
});

Marcação HTML, use o quanto quiser:

<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 a imagem (ícone de cancelamento) com posição absoluta, ajuste as propriedades superior e esquerda e chame o evento onclick do método que limpa o campo de entrada.

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

Em css posicione o span de acordo,

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