CODEWITHSUNDEEP
jqueryhtmlinternet-explorergoogle-chromefirefox
Syed Mahfuzul Mazid
Syed Mahfuzul Mazid

Reputation: 91

how to add a clear button in jquery autocomplete

how to add a clear button jquery autocomplete. Adding an image what I actually need.enter image description here

How to add that X button. It has to clear the autocomplete search text-box. This comes automatically in ie10+ but don't come in other browsers..

I am adding jQuery autocomple. no css is there.. 

<input type="text" id="skin"/> 
<script> 
$('#skin').autocomplete({ source: abcd.php }); 
</script>

Upvotes: 1

Views: 7198

Answers (2)

andreivictor
andreivictor

Reputation: 8461

Basically, I understand that you need a button that clears away the current value of the autocomplete input element.

I had the same need and I had ended up writing a small extension for the jQuery UI Autocomplete plugin.

Script

The full code is here:

;(function($) {

  $.widget( "ui.autocomplete", $.ui.autocomplete, {

  // extend default options
  options : {
    clearButton: false,
    clearButtonHtml: '&times;',
    clearButtonPosition: {
      my: "right center",
      at: "right center"
    }
  },

  _create: function() {

    var self = this;

    // Invoke the parent widget's method.
    self._super();

    if ( self.options.clearButton ) {
      self._createClearButton();
    }

  },

  _createClearButton: function() {

    var self = this;

    self.clearElement = $("<span>")
                    .attr( "tabindex", "-1" )
                    .addClass( "ui-autocomplete-clear" )
                    .html( self.options.clearButtonHtml )
                    .appendTo( self.element.parent() );

    if ( self.options.clearButtonPosition !== false && typeof self.options.clearButtonPosition === 'object' ) {
      if ( typeof self.options.clearButtonPosition.of === 'undefined' ) {
        self.options.clearButtonPosition.of = self.element;
      }    
      self.clearElement.position( self.options.clearButtonPosition); 
    }                       

    self._on( self.clearElement, {
      click: function() {
        self.element.val('').focus();
        self._hideClearButton();
      }
    });

    self.element.addClass('ui-autocomplete-input-has-clear');

    self._on( self.element, {
      input: function() {
        if ( self.element.val()!=="" ) {
          self._showClearButton();
        } else {
          self._hideClearButton();
        }
      }
    });

    self._on( self.menu.element, {
      menuselect: function() {
        self._showClearButton();
      }
    });

    // show clearElement if input has some content on initialization
    if( self.element.val()!=="" ) {
      self._showClearButton();
    } else {
      self._hideClearButton();
    }

  },

  _showClearButton: function() {
    this.clearElement.css({'display': 'inline-block'});
  },

  _hideClearButton: function() {
    this.clearElement.css({'display': 'none'});
  }

  });

})(window.jQuery);

Usage

After including the code above after jquery-autocomplete script, you can initialize the autocomplete with the newly added option clearButton setted to true, as follows:

$("input").autocomplete({
    source: ...,
    clearButton: true
});

Demo

Codepen demo here: http://codepen.io/andreivictor/pen/GmZWEJ.

Additional info

You can also set the HTML content for this button, using the clearButtonHtml option. This button is positioned with jQuery UI Position script (http://api.jqueryui.com/position/). If you don't use this script, set the clearButtonPosition option to false and position it with CSS.

Upvotes: 7

Roshan
Roshan

Reputation: 2184

Insert an image inside input field using CSS, then make that image clickable and put this in your script:

 $("#cancel").click(function() {
     $('#search').autocomplete('close');
 });

JSFiddle demo here

Upvotes: 1

Related Questions