How to clear search box with "x" in bootstrap 3?

Question

Some download problems, so some help would be awesome. Thanks

What I would like: (top)

My current code is:

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

Current screenshot:

Answer 1

To get something like this

with Bootstrap 3 and Jquery use the following HTML code:

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

and some CSS:

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

and javascript:

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

Of course you need to write more Javascript for whatever functionality you need, for example. hide "x" if the input is empty, make Ajax requests and so on. See http://www.bootply.com/121508

Answer 2

Super-simple HTML 5 solution:

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

Source: HTML 5 Tutorial - Input Type: Search

This works at least in Chrome 8, Edge 14, IE 10, and Safari 5 and does not require Bootstrap or any other library. (Unfortunately, it looks like Firefox does not yet support the clear search button.)

After entering in the search box appears "x", which you can click to clear the text. This will still work as a normal edit box (without the x button) in other browsers such as Firefox, so Firefox users can instead select text and click Delete, or ...

If you really need this convenient feature supported in Firefox, then you can implement one of the other solutions published here as a polyfill for input [type = search] elements. Polyfill is a code that automatically adds a standard browser function when a user browser does not support this function. Over time, the hope is that you can remove polyfills, as browsers implement the corresponding functions. And in any case, the implementation of polyfill can help keep HTML code clean.

By the way, other HTML 5 input types (such as date, number, email, etc.) will also be gracefully reduced to a simple editing field. Some browsers may provide you with an unusual date picker, a rotation control with up / down buttons, or (on mobile phones) a special keyboard with a “@” symbol and a “.com” button, but as far as I know, all browsers will at least show text box for any unrecognized input type.

---

Bootstrap 3 & HTML 5 Solution

Bootstrap 3 resets a lot of CSS and breaks the HTML 5 cancel button. After loading Bootstrap 3 CSS, you can restore the cancel button with the CSS used in the following example:

 <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: HTML 5 Search input does not work with bootstrap

I have verified that this solution works in the latest versions of Chrome, Edge, and Internet Explorer. I can not check in Safari. Unfortunately, the “x” button to clear the search does not appear in Firefox, but, as mentioned above, for browsers that do not initially support this function (for example, Firefox), polyfill can be implemented.

Answer 3

I tried to avoid too much custom CSS, and after reading some other examples, I combined the ideas and got this 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> 

Since I do not use JavaScript to bootstrap, just CSS along with Angular, I do not need classes to have clear and precise control, and I implemented the clear function in my AngularJS controller. Using JavaScript bootstrap is possible without native JavaScript.

Answer 4

Thank you for making your decision very clean. I used horizontal bootstrap forms and made a couple of modifications to allow one handler and form css.

html: - UPDATED to use Bootstrap feedback and format 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(); }); 

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

Answer 5

Corner answer / UI-Bootstrap

• Use Bootstrap has-feedback to display the icon inside the input field.
• Make sure the icon has style="cursor: pointer; pointer-events: all;"
• Use ng-click to clear the text.

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> 

Here's the plunker: http://plnkr.co/edit/av9VFw?p=preview

Answer 6

Do this with inline styles and a script:

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

Answer 7

Here is my working solution with search and clear icon for Angularjs \ Bootstrap with 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; } 

Answer 8

Do not mess with the item id, just use the previous item to clear it.

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, use as much as you want:

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

Answer 9

Place the image (the cancel icon) with the absolute position, adjust the top and left properties and call the onclick method, which will clear the input field.

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

In css, the span position, respectively,

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