Comment effacer un champ de recherche avec un «x» dans bootstrap 3?

Avoir des problèmes avec bootstrap, donc une aide serait géniale. Merci

Ce que je voudrais: (partie supérieure)

Mon code actuel:

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

Capture d'écran actuelle:

Pour obtenir quelque chose comme ça

avec Bootstrap 3 et Jquery, utilisez le code HTML suivant:

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

et quelques CSS:

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

et Javascript:

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

Bien sûr, vous devez écrire plus de Javascript pour toutes les fonctionnalités dont vous avez besoin, par exemple pour masquer le 'x' si l'entrée est vide, faire des requêtes Ajax et ainsi de suite. Voir http://www.bootply.com/121508

Solution HTML 5 super simple:

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

Source: Tutoriel HTML 5 - Type d'entrée: Recherche

Cela fonctionne au moins dans Chrome 8, Edge 14, IE 10 et Safari 5 et ne nécessite pas Bootstrap ou toute autre bibliothèque. (Malheureusement, il semble que Firefox ne prenne pas encore en charge le bouton d'effacement de la recherche.)

Après avoir tapé dans la zone de recherche, un «x» apparaîtra sur lequel vous pouvez cliquer pour effacer le texte. Cela fonctionnera toujours comme une boîte d'édition ordinaire (sans le bouton `` x '') dans d'autres navigateurs, tels que Firefox, afin que les utilisateurs de Firefox puissent à la place sélectionner le texte et appuyer sur Supprimer, ou ...

Si vous avez vraiment besoin de cette fonctionnalité intéressante prise en charge dans Firefox, vous pouvez implémenter l'une des autres solutions publiées ici en tant que polyfill pour les éléments input [type = search]. Un polyfill est un code qui ajoute automatiquement une fonctionnalité de navigateur standard lorsque le navigateur de l'utilisateur ne prend pas en charge la fonctionnalité. Au fil du temps, nous espérons pouvoir supprimer les polyfills au fur et à mesure que les navigateurs implémentent les fonctionnalités respectives. Et dans tous les cas, une implémentation polyfill peut aider à garder le code HTML plus propre.

À propos, d'autres types d'entrées HTML 5 (tels que «date», «nombre», «e-mail», etc.) se dégraderont également en une simple zone d'édition. Certains navigateurs peuvent vous proposer un sélecteur de date sophistiqué, une commande à molette avec boutons haut / bas ou (sur les téléphones mobiles) un clavier spécial qui comprend le signe «@» et un bouton «.com», mais à ma connaissance, tous les navigateurs affichera au moins une zone de texte brut pour tout type d'entrée non reconnu.

Solution Bootstrap 3 et HTML 5

Bootstrap 3 réinitialise beaucoup de CSS et casse le bouton d'annulation de recherche HTML 5. Une fois le CSS Bootstrap 3 chargé, vous pouvez restaurer le bouton d'annulation de recherche avec le CSS utilisé dans l'exemple suivant:

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

Source: l' entrée de recherche HTML 5 ne fonctionne pas avec Bootstrap

J'ai testé que cette solution fonctionne dans les dernières versions de Chrome, Edge et Internet Explorer. Je ne peux pas tester dans Safari. Malheureusement, le bouton 'x' pour effacer la recherche n'apparaît pas dans Firefox, mais comme ci-dessus, un polyfill pourrait être implémenté pour les navigateurs qui ne supportent pas cette fonctionnalité de manière native (par exemple Firefox).

J'ai essayé d'éviter trop de CSS personnalisé et après avoir lu d'autres exemples, j'ai fusionné les idées et j'ai obtenu cette solution:

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

Comme je n'utilise pas le JavaScript de bootstrap, juste le CSS avec Angular, je n'ai pas besoin des classes has-clear et form-control-clear, et j'ai implémenté la fonction clear dans mon contrôleur AngularJS. Avec le JavaScript de bootstrap, cela pourrait être possible sans son propre JavaScript.

Merci sans fil, votre solution était très propre. J'utilisais des formulaires bootstrap horizontaux et j'ai apporté quelques modifications pour permettre un seul gestionnaire et un formulaire css.

html: - MISE À JOUR pour utiliser les commentaires has-feedback et 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();
});

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

Réponse AngularJS / UI-Bootstrap

• Utilisez la classe has-feedback de Bootstrap pour afficher une icône dans le champ de saisie.
• Assurez-vous que l'icône a style="cursor: pointer; pointer-events: all;"
• Utilisez ng-clickpour effacer le texte.

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 (extrait d'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>

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

Faites-le avec des styles et des scripts en ligne:

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

Voici ma solution de travail avec recherche et icône d'effacement pour Angularjs \ Bootstrap avec 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; 
}

Ne liez pas à l'ID d'élément, utilisez simplement l'élément d'entrée «précédent» pour effacer.

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, utilisez autant que vous le souhaitez:

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

Placez l'image (icône d'annulation) avec la position absolue, ajustez les propriétés du haut et de gauche et appelez la méthode d'événement onclick qui efface le champ de saisie.

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

En css, positionnez le span en conséquence,

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