Wie lösche ich ein Suchfeld mit einem 'x' in Bootstrap 3?

Wenn Sie Probleme mit dem Bootstrap haben, wäre eine Hilfe großartig. Vielen Dank

Was ich möchte: (oberer Teil)

Mein aktueller Code:

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

Aktueller Screenshot:

Um so etwas zu bekommen

Verwenden Sie mit Bootstrap 3 und Jquery den folgenden HTML-Code:

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

und etwas CSS:

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

und Javascript:

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

Natürlich müssen Sie mehr Javascript für die von Ihnen benötigten Funktionen schreiben, z. B. um das 'x' auszublenden, wenn die Eingabe leer ist, Ajax-Anfragen zu stellen und so weiter. Siehe http://www.bootply.com/121508

Supereinfache HTML 5-Lösung:

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

Quelle: HTML 5 Tutorial - Eingabetyp: Suche

Dies funktioniert mindestens in Chrome 8, Edge 14, IE 10 und Safari 5 und erfordert weder Bootstrap noch eine andere Bibliothek. (Leider scheint Firefox die Schaltfläche zum Löschen der Suche noch nicht zu unterstützen.)

Nach Eingabe des Suchfelds wird ein 'x' angezeigt, auf das geklickt werden kann, um den Text zu löschen. Dies funktioniert weiterhin wie ein normales Bearbeitungsfeld (ohne die Schaltfläche 'x') in anderen Browsern, z. B. Firefox, sodass Firefox-Benutzer stattdessen den Text auswählen und Löschen drücken können oder ...

Wenn Sie diese nette Funktion wirklich benötigen, die in Firefox unterstützt wird, können Sie eine der anderen hier veröffentlichten Lösungen als Polyfüllung für Eingabeelemente [Typ = Suche] implementieren. Eine Polyfüllung ist Code, der automatisch eine Standardbrowserfunktion hinzufügt, wenn der Browser des Benutzers die Funktion nicht unterstützt. Mit der Zeit besteht die Hoffnung, dass Sie Polyfills entfernen können, wenn Browser die entsprechenden Funktionen implementieren. In jedem Fall kann eine Polyfill-Implementierung dazu beitragen, den HTML-Code sauberer zu halten.

Übrigens werden auch andere HTML 5-Eingabetypen (wie "Datum", "Nummer", "E-Mail" usw.) ordnungsgemäß in ein einfaches Bearbeitungsfeld umgewandelt. Einige Browser bieten Ihnen möglicherweise eine ausgefallene Datumsauswahl, eine Drehfeldsteuerung mit Auf- / Ab-Tasten oder (auf Mobiltelefonen) eine spezielle Tastatur mit dem @ -Zeichen und einer .com-Taste, aber meines Wissens alle Browser werden mindestens ein einfaches Textfeld für jeden nicht erkannten Eingabetyp an.

Bootstrap 3 & HTML 5 Lösung

Bootstrap 3 setzt viel CSS zurück und unterbricht die Schaltfläche zum Abbrechen der HTML 5-Suche. Nachdem das Bootstrap 3-CSS geladen wurde, können Sie die Schaltfläche zum Abbrechen der Suche mit dem im folgenden Beispiel verwendeten CSS wiederherstellen:

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

Quelle: HTML 5 Search Input funktioniert nicht mit Bootstrap

Ich habe getestet, dass diese Lösung in den neuesten Versionen von Chrome, Edge und Internet Explorer funktioniert. Ich kann nicht in Safari testen. Leider wird die Schaltfläche 'x' zum Löschen der Suche in Firefox nicht angezeigt. Wie oben könnte jedoch eine Polyfüllung für Browser implementiert werden, die diese Funktion nicht nativ unterstützen (z. B. Firefox).

Ich habe versucht, zu viel benutzerdefiniertes CSS zu vermeiden, und nachdem ich einige andere Beispiele gelesen hatte, habe ich die Ideen dort zusammengeführt und diese Lösung erhalten:

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

Da ich kein BootScript-JavaScript verwende, sondern nur das CSS zusammen mit Angular, benötige ich nicht die Klassen has-clear und form-control-clear, und ich habe die clear-Funktion in meinem AngularJS-Controller implementiert. Mit dem JavaScript von Bootstrap ist dies möglicherweise ohne eigenes JavaScript möglich.

Vielen Dank, dass Ihre Lösung sehr sauber war. Ich habe horizontale Bootstrap-Formulare verwendet und einige Änderungen vorgenommen, um einen einzelnen Handler und Formular-CSS zu ermöglichen.

html: - AKTUALISIERT , um Bootstraps Has -Feedback und Form-Control-Feedback zu verwenden

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

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

AngularJS / UI-Bootstrap Antwort

• Verwenden Sie die Has -Feedback- Klasse von Bootstrap , um ein Symbol im Eingabefeld anzuzeigen.
• Stellen Sie sicher, dass das Symbol hat style="cursor: pointer; pointer-events: all;"
• Verwenden Sie ng-clickdiese Option , um den Text zu löschen.

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>

Hier ist der Plunker: http://plnkr.co/edit/av9VFw?p=preview

Machen Sie es mit Inline-Stilen und Skripten:

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

Hier ist meine Arbeitslösung mit Suche und klarem Symbol für Angularjs \ Bootstrap mit 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; 
}

Nicht an Element-ID binden, sondern nur das 'vorherige' Eingabeelement zum Löschen verwenden.

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

Verwenden Sie HTML Markup so oft Sie möchten:

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

Platzieren Sie das Bild (Abbruch-Symbol) mit der absoluten Position, passen Sie die Eigenschaften oben und links an und rufen Sie die Methode onclick event auf, um das Eingabefeld zu löschen.

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

In CSS-Position die Spanne entsprechend,

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