How do I clear a search box with an x in bootstrap 3

Question

Having some trouble with bootstrap  so some help would be awesome  Thanks  What I would like  top part     My current code    lt div class  form-group  gt       lt input type  text              class  form-control              id  findJobTitle              name  findJobTitle              placeholder  Job Title  Keywords              onkeyup  showResult    gt    lt  div gt    Current Screenshot

User · Answer

Here is my working solution with search and clear icon for Angularjs Bootstrap with CSS        lt div class  form-group has-feedback has-clear  gt                       lt input type  search  class  form-control removeXicon  ng-model  filter  style  max-width 100   placeholder  Search       gt                       lt div ng-switch on    filter  gt                           lt div ng-switch-when  false  gt                               lt span class  glyphicon glyphicon-search form-control-feedback  gt  lt  span gt                           lt  div gt                           lt div ng-switch-when  true  gt                               lt span class  glyphicon glyphicon-remove-sign form-control-feedback  ng-click   parent filter       style  pointer-events  auto  text-decoration  none cursor  pointer   gt  lt  span gt                           lt  div gt                       lt  div gt                                           lt  div gt   ------  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

User · Answer

To get something like this    with Bootstrap 3 and Jquery use the following HTML code    lt div class  btn-group  gt     lt input id  searchinput  type  search  class  form-control  gt     lt span id  searchclear  class  glyphicon glyphicon-remove-circle  gt  lt  span gt   lt  div gt    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 have to write more Javascript for whatever functionality you need  e g  to hide the  x  if the input is empty  make Ajax requests and so on  See http   www bootply com 121508

User · Answer

AngularJS   UI-Bootstrap Answer   Use Bootstrap s has-feedback class to show an 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          lt div class  form-group has-feedback  gt           lt label gt text box lt  label gt           lt input type  text                 ng-model  params text                 class  form-control                 placeholder  type something here     gt           lt span ng-if  params text                ng-click  clearText                  class  glyphicon glyphicon-remove form-control-feedback                 style  cursor  pointer  pointer-events  all                 uib-tooltip  clear  gt           lt  span gt         lt  div gt    Here s the plunker  http   plnkr co edit av9VFw p preview

User · Answer

Thanks unwired your solution was very clean   I was using horizontal bootstrap forms and made a couple modifications to allow for a single handler and form css   html  - UPDATED to use Bootstrap s has-feedback and form-control-feedback    lt div class  container  gt     lt form class  form-horizontal  gt      lt div class  form-group has-feedback  gt       lt label for  txt1  class  col-sm-2 control-label  gt Label 1 lt  label gt       lt div class  col-sm-10  gt        lt input id  txt1  type  text  class  form-control hasclear  placeholder  Textbox 1  gt        lt span class  clearer glyphicon glyphicon-remove-circle form-control-feedback  gt  lt  span gt       lt  div gt      lt  div gt      lt div class  form-group has-feedback  gt       lt label for  txt2  class  col-sm-2 control-label  gt Label 2 lt  label gt       lt div class  col-sm-10  gt         lt input id  txt2  type  text  class  form-control hasclear  placeholder  Textbox 2  gt         lt span class  clearer glyphicon glyphicon-remove-circle form-control-feedback  gt  lt  span gt       lt  div gt      lt  div gt      lt div class  form-group has-feedback  gt       lt label for  txt3  class  col-sm-2 control-label  gt Label 3 lt  label gt       lt div class  col-sm-10  gt        lt input id  txt3  type  text  class  form-control hasclear  placeholder  Textbox 3  gt        lt span class  clearer glyphicon glyphicon-remove-circle form-control-feedback  gt  lt  span gt       lt  div gt         lt  div gt     lt  form gt    lt  div gt    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

User · Answer

I tried to avoid too much custom CSS and after reading some other examples I merged the ideas there and got this solution    lt div class  form-group has-feedback has-clear  gt       lt input type  text  class  form-control  ng-model  ctrl searchService searchTerm  ng-change  ctrl search    placeholder  Suche   gt       lt 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   gt  lt  a gt   lt  div gt    As I don t use bootstrap s JavaScript  just the CSS together with Angular  I don t need the classes has-clear and form-control-clear  and I implemented the clear function in my AngularJS controller  With bootstrap s JavaScript this might be possible without own JavaScript

User · Answer

Place the image  cancel icon  with position absolute  adjust top and left properties and call method onclick event which clears the input field    lt div class  form-control  gt       lt input type  text  id  inputField    gt   lt  div gt   lt span id  iconSpan  gt  lt img src  icon png  onclick  clearInputField     gt  lt  span gt    In css position the span accordingly    iconSpan    position   absolute   top 1    left  14

User · Answer

Do it with inline styles and script    lt div class  btn-group has-feedback has-clear  gt       lt input id  searchinput  type  search  class  form-control  style  width 200px   gt           lt 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   gt   lt  a gt   lt  div gt

User · Answer

Super-simple HTML 5 Solution    x000D   x000D   lt input type  search  placeholder  Search       gt  x000D   x000D   x000D    Source  HTML 5 Tutorial - Input Type  Search  That works in at least Chrome 8  Edge 14  IE 10  and Safari 5 and does not require Bootstrap or any other library   Unfortunately  it seems Firefox does not support the search clear button yet     After typing in the search box  an  x  will appear which can be clicked to clear the text   This will still work as an ordinary edit box  without the  x  button  in other browsers  such as Firefox  so Firefox users could instead select the text and press delete  or     If you really need this nice-to-have feature supported in Firefox  then you could implement one of the other solutions posted here as a polyfill for input type search  elements  A polyfill is code that automatically adds a standard browser feature when the user s browser doesn t support the feature   Over time  the hope is that you d be able to remove polyfills as browsers implement the respective features  And in any case  a polyfill implementation can help to keep the HTML code cleaner   By the way  other HTML 5 input types  such as  date    number    email   etc   will also degrade gracefully to a plain edit box  Some browsers might give you a fancy date picker  a spinner control with up down buttons  or  on mobile phones  a special keyboard that includes the     sign and a   com  button  but to my knowledge  all browsers will at least show a plain text box for any unrecognized input type     Bootstrap 3  amp  HTML 5 Solution  Bootstrap 3 resets a lot of CSS and breaks the HTML 5 search cancel button   After the Bootstrap 3 CSS has been loaded  you can restore the search cancel button with the CSS used in the following example    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt style gt  x000D    input type  search    -webkit-search-cancel-button   x000D      -webkit-appearance  searchfield-cancel-button  x000D      x000D   lt  style gt  x000D   lt div class  form-inline  gt  x000D     lt input type  search  placeholder  Search     class  form-control    gt  x000D   lt  div gt  x000D   x000D   x000D    Source  HTML 5 Search Input Does Not Work with Bootstrap  I have tested that this solution works in the latest versions of Chrome  Edge  and Internet Explorer  I am not able to test in Safari  Unfortunately  the  x  button to clear the search does not appear in Firefox  but as above  a polyfill could be implemented for browsers that don t support this feature natively  i e  Firefox

User · Answer

Do not bind to element id  just use the  previous  input element to clear   CSS    clear-input  gt  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 gt 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 like    lt div class  clear-input  gt      Pizza   lt input type  text  class  form-control  gt       lt span class  glyphicon glyphicon-remove-circle  gt  lt  span gt   lt  div gt    lt div class  clear-input  gt      Pasta   lt input type  text  class  form-control  gt       lt span class  glyphicon glyphicon-remove-circle  gt  lt  span gt   lt  div gt

[twitter-bootstrap] How do I clear a search box with an 'x' in bootstrap 3?

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3