Jak wyczyścić pole wyszukiwania za pomocą „x” w programie bootstrap 3?

94

Mam problem z bootstrapem, więc pewna pomoc byłaby niesamowita. Dzięki

Co chciałbym: (górna część)

wprowadź opis obrazu tutaj

Mój obecny kod:

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

Bieżący zrzut ekranu:

wprowadź opis obrazu tutaj

Duch ducha K2SO
źródło

Odpowiedzi:

209

Aby dostać coś takiego

wejście z przyciskiem wyczyść

z Bootstrap 3 i Jquery użyj następującego kodu HTML:

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

i trochę CSS:

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

i JavaScript:

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

Oczywiście musisz napisać więcej JavaScript dla dowolnej funkcjonalności, jakiej potrzebujesz, np. Aby ukryć „x”, jeśli wejście jest puste, wysyłać żądania Ajax i tak dalej. Zobacz http://www.bootply.com/121508

bez okablowania
źródło
4
Jeśli ktoś woli Plunkera od Bootply, oto jest: plnkr.co/edit/c2710u?p=preview
tanguy_k
2
Z punktu widzenia dostępności lepiej byłoby, gdyby #searchclearrozpiętość była przyciskiem. To element interaktywny, więc oznacz go jako element interaktywny. W obecnej sytuacji użytkownicy, którzy polegają na nawigacji za pomocą klawiatury, nie mogą przechodzić do zakresu searchclear i nie będą łatwo rozpoznawani przez technologie wspomagające (takie jak czytniki ekranu)
Ian Dickinson
3
Właśnie wypróbowałem rozwiązanie tego problemu, jeśli używasz tego wejścia w linii z innymi elementami (takimi jak dodatki, listy rozwijane itp.) Po prostu usuń klasę opakowującego elementu div, ustaw go, position: relativea następnie dostosuj #searchclear za pomocą z-index: 10; top: 10pxi usuńbottom: 0
RecuencoJones
Czy nie jest sprzecznością posiadanie góry, dołu i wysokości?
nafg
96

Super proste rozwiązanie HTML 5:

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

Źródło: samouczek HTML 5 - typ danych wejściowych: wyszukiwanie

Działa co najmniej w Chrome 8, Edge 14, IE 10 i Safari 5 i nie wymaga Bootstrap ani żadnej innej biblioteki. (Niestety wydaje się, że Firefox nie obsługuje jeszcze przycisku czyszczenia wyszukiwania).

Po wpisaniu w pole wyszukiwania pojawi się „x”, który można kliknąć, aby wyczyścić tekst. Będzie to nadal działać jak zwykłe pole edycji (bez przycisku `` x '') w innych przeglądarkach, takich jak Firefox, więc użytkownicy Firefoksa mogą zamiast tego zaznaczyć tekst i nacisnąć Usuń lub ...

Jeśli naprawdę potrzebujesz tej przyjemnej do posiadania funkcji obsługiwanej w Firefoksie, możesz zaimplementować jedno z innych rozwiązań zamieszczonych tutaj jako polyfill dla elementów input [type = search]. Wypełnienie to kod, który automatycznie dodaje standardową funkcję przeglądarki, gdy przeglądarka użytkownika nie obsługuje tej funkcji. Istnieje nadzieja, że ​​z biegiem czasu uda Ci się usunąć wypełnienia w miarę wdrażania odpowiednich funkcji przez przeglądarki. W każdym razie implementacja polyfill może pomóc w utrzymaniu czystszego kodu HTML.

Nawiasem mówiąc, inne typy danych wejściowych HTML 5 (takie jak „data”, „liczba”, „e-mail” itp.) Również zostaną z wdziękiem zdegradowane do zwykłego pola edycji. Niektóre przeglądarki mogą oferować fantazyjny selektor dat, pokrętło z przyciskami w górę / w dół lub (w telefonach komórkowych) specjalną klawiaturę ze znakiem „@” i przyciskiem „.com”, ale według mojej wiedzy wszystkie przeglądarki pokaże przynajmniej zwykłe pole tekstowe dla każdego nierozpoznanego typu danych wejściowych.


Rozwiązanie Bootstrap 3 i HTML 5

Bootstrap 3 resetuje wiele CSS i łamie przycisk anulowania wyszukiwania HTML 5. Po załadowaniu kodu CSS Bootstrap 3 możesz przywrócić przycisk anulowania wyszukiwania za pomocą kodu CSS użytego w następującym przykładzie:

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

Źródło: Wyszukiwanie HTML 5 nie działa z Bootstrapem

Przetestowałem, że to rozwiązanie działa w najnowszych wersjach Chrome, Edge i Internet Explorer. Nie mogę przetestować w Safari. Niestety przycisk „x” służący do wyczyszczenia wyszukiwania nie pojawia się w przeglądarce Firefox, ale jak wyżej, w przeglądarkach, które nie obsługują tej funkcji natywnie (np. Firefox), można zaimplementować polyfill.

YipYip
źródło
2
FWIW: Nie wierzę, że to już działa w Chrome. Może nie jest już częścią oficjalnej specyfikacji CSS? W3Schools twierdzi, że „pole wyszukiwania zachowuje się jak zwykłe pole tekstowe”, a MDN nie wspomina o tej funkcjonalności. MDN twierdzi, że usunie nowe linie, ale to wszystko dla tego typu wejścia.
KyleFarris
3
@KyleFarris Obie powyższe metody nadal działają u mnie w Chrome w wersji 58.0.3029.110 (64-bit). Musisz wpisać coś w polu wyszukiwania, zanim pojawi się przycisk czyszczenia.
YipYip
W jaki sposób ta super-oceniona odpowiedź rozwiązuje problem z OP, aby wyświetlić przycisk „wyczyść” w polu tekstowym, który usuwa jego zawartość?
usr-local-ΕΨΗΕΛΩΝ
2
Nie jest to super proste rozwiązanie, jeśli nie działa we wszystkich głównych przeglądarkach.
thelem
1
@AnandUndavia Dzięki za zgłoszenie tego. Zaktualizowałem swoją odpowiedź, aby określić „Bootstrap 3”, którego używał OP, kiedy opublikowano pytanie (w 2013 r.). Postaram się, aby moja odpowiedź zadziałała dla Bootstrap 4, gdy będę miała czas.
YipYip,
23

Starałem się unikać zbyt wielu niestandardowych CSS i po przeczytaniu kilku innych przykładów połączyłem tam pomysły i otrzymałem to rozwiązanie:

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

Ponieważ nie używam JavaScript bootstrap, tylko CSS razem z Angularem, nie potrzebuję, aby klasy miały-clear i form-control-clear, a zaimplementowałem funkcję clear w moim kontrolerze AngularJS. Z JavaScriptem bootstrapa może to być możliwe bez własnego JavaScript.

Paul Wellner Bou
źródło
1
Możesz także dodać ng-hide do przycisku X, aby go nie widzieć, jeśli wejście jest puste.
jrvidotti
za czysty guzik ng-click="ctrl.searchService.searchTerm = null"ing-show="ctrl.searchService.searchTerm"
Adrian
18

Dzięki bez okablowania Twoje rozwiązanie było bardzo czyste. Używałem poziomych formularzy bootstrap i wprowadziłem kilka modyfikacji, aby umożliwić użycie jednego handlera i formularza css.

html: - ZAKTUALIZOWANO, aby używać Bootstrap's has-feedback i form-control-feedback

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

przykład: http://www.bootply.com/130682

LDAdams
źródło
8
Po bootstrap v3.3.0 będziesz musiał ustawić zdarzenia wskaźnika z none na auto, w przeciwnym razie nie będziesz mógł kliknąć informacji zwrotnej kontrolnej formularza.
Vizjerai
Co robi $(".clearer").hide($(this).prev('input').val());? Czy to nie może być po prostu $(".clearer").hide();?
Jim Buck
Zakładam, że jego zamiarem było przekazanie prawdziwego parametru do hide (), aby rozpocząć ukrywanie / pokazywanie na podstawie tego, czy dane wejściowe mają już wartość. Jeśli taki był zamiar, zawiódł (hide zawsze się chowa). Powinno być$(".clearer").toggle(!!$(this).prev('input').val());
Jeff Shepler
15

Odpowiedź AngularJS / UI-Bootstrap

  • Użyj klasy has-feedback programu Bootstrap, aby wyświetlić ikonę w polu wejściowym.
  • Upewnij się, że ikona ma style="cursor: pointer; pointer-events: all;"
  • Użyj, ng-clickaby wyczyścić tekst.

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

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

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

Derek Soike
źródło
1

Zrób to za pomocą wbudowanych stylów i skryptów:

<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>
Denis Sivzov
źródło
1

Oto moje rozwiązanie robocze z ikoną wyszukiwania i czyszczenia dla Angularjs \ Bootstrap z 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; 
}
PavanT
źródło
1

Nie wiąż się z identyfikatorem elementu, po prostu użyj „poprzedniego” elementu wejściowego, aby wyczyścić.

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

HTML Markup, używaj tyle, ile chcesz:

<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>
pizzamonster
źródło
-7

Umieść obraz (ikona anulowania) z pozycją bezwzględną, dostosuj właściwości top i left i wywołaj zdarzenie onclick, które czyści pole wejściowe.

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

W css ustaw odpowiednio rozpiętość,

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}
code2use
źródło