Come faccio a cancellare una casella di ricerca con una "x" in bootstrap 3?

Avendo qualche problema con il bootstrap, quindi un aiuto sarebbe fantastico. Grazie

Cosa vorrei: (parte superiore)

Il mio codice attuale:

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

Screenshot corrente:

Per ottenere qualcosa di simile

con Bootstrap 3 e Jquery utilizzare il seguente codice HTML:

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

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

Ovviamente devi scrivere più Javascript per qualsiasi funzionalità di cui hai bisogno, ad esempio per nascondere la "x" se l'input è vuoto, effettuare richieste Ajax e così via. Vedi http://www.bootply.com/121508

Soluzione HTML 5 super semplice:

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

Fonte: tutorial HTML 5 - Tipo di input: ricerca

Funziona almeno su Chrome 8, Edge 14, IE 10 e Safari 5 e non richiede Bootstrap o qualsiasi altra libreria. (Sfortunatamente, sembra che Firefox non supporti ancora il pulsante di cancellazione della ricerca.)

Dopo aver digitato nella casella di ricerca, verrà visualizzata una "x" su cui è possibile fare clic per cancellare il testo. Funzionerà comunque come una normale casella di modifica (senza il pulsante "x") in altri browser, come Firefox, quindi gli utenti di Firefox potranno invece selezionare il testo e premere Elimina, oppure ...

Se hai davvero bisogno di questa bella funzionalità supportata in Firefox, potresti implementare una delle altre soluzioni pubblicate qui come polyfill per gli elementi di input [tipo = ricerca]. Un polyfill è un codice che aggiunge automaticamente una funzionalità del browser standard quando il browser dell'utente non supporta la funzionalità. Nel tempo, la speranza è che sarai in grado di rimuovere i polyfill man mano che i browser implementano le rispettive funzionalità. E in ogni caso, un'implementazione del polyfill può aiutare a mantenere il codice HTML più pulito.

A proposito, anche altri tipi di input HTML 5 (come "data", "numero", "email", ecc.) Si degradano con grazia in una semplice casella di modifica. Alcuni browser potrebbero fornire un selezionatore di date di fantasia, un controllo di selezione con pulsanti su / giù o (sui telefoni cellulari) una tastiera speciale che include il segno "@" e un pulsante ".com", ma per quanto ne so, tutti i browser mostrerà almeno una casella di testo normale per qualsiasi tipo di input non riconosciuto.

Soluzione Bootstrap 3 e HTML 5

Bootstrap 3 ripristina molti CSS e interrompe il pulsante di annullamento della ricerca HTML 5. Dopo che il CSS Bootstrap 3 è stato caricato, è possibile ripristinare il pulsante di annullamento della ricerca con il CSS utilizzato nel seguente esempio:

<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: input di ricerca HTML 5 non funziona con Bootstrap

Ho verificato che questa soluzione funzioni nelle ultime versioni di Chrome, Edge e Internet Explorer. Non sono in grado di eseguire il test in Safari. Sfortunatamente, il pulsante "x" per cancellare la ricerca non viene visualizzato in Firefox, ma come sopra, potrebbe essere implementato un polyfill per i browser che non supportano questa funzionalità in modo nativo (ad esempio Firefox).

Ho cercato di evitare troppi CSS personalizzati e dopo aver letto alcuni altri esempi ho unito le idee lì e ho ottenuto questa soluzione:

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

Dato che non uso JavaScript di bootstrap, solo il CSS insieme ad Angular, non ho bisogno delle classi has-clear e form-control-clear, e ho implementato la funzione clear nel mio controller AngularJS. Con JavaScript di bootstrap questo potrebbe essere possibile senza il proprio JavaScript.

Grazie non cablato la tua soluzione era molto pulita. Stavo usando i moduli bootstrap orizzontali e ho apportato un paio di modifiche per consentire un singolo gestore e modulo CSS.

html: - AGGIORNATO per utilizzare has-feedback e form-control-feedback di 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();
});

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

Risposta AngularJS / UI-Bootstrap

• Usa la classe has-feedback di Bootstrap per mostrare un'icona all'interno del campo di input.
• Assicurati che l'icona abbia style="cursor: pointer; pointer-events: all;"
• Utilizzare ng-clickper cancellare il testo.

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>

Ecco il plunker: http://plnkr.co/edit/av9VFw?p=preview

Fallo con stili e script in linea:

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

Ecco la mia soluzione di lavoro con ricerca e icona di cancellazione per 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; 
}

Non associare all'id dell'elemento, usa semplicemente l'elemento di input "precedente" per cancellare.

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

Markup HTML, usa quanto vuoi:

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

Posiziona l'immagine (icona di annullamento) con la posizione assoluta, regola le proprietà in alto e a sinistra e chiama il metodo onclick evento che cancella il campo di input.

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

In css posizionare lo span di conseguenza,

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