如何在jquery自动完成中添加一个清除按钮

Question

如何添加一个清除按钮jquery自动完成.添加我真正需要的图像.

如何添加X按钮.它必须清除自动完成搜索文本框.这会自动出现在ie10 +中,但不会出现在其他浏览器中.

我正在添加jQuery自动填充.没有css在那里..

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

Answer 1

基本上,我知道您需要一个清除自动完成input元素当前值的按钮.

我有同样的需求,我最终为jQuery UI Autocomplete插件编写了一个小扩展.

脚本

完整代码在这里:

;(function($) {

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

  // extend default options
  options : {
    clearButton: false,
    clearButtonHtml: '×',
    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);

用法

包括后上面的代码后jquery-autocomplete脚本,您可以初始化新添加的选项自动完成clearButton设置好的来true,如下所示:

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

演示

Codepen演示:http://codepen.io/andreivictor/pen/GmZWEJ .

附加信息

您还可以使用该clearButtonHtml选项为此按钮设置HTML内容.此按钮位于jQuery UI Position脚本(http://api.jqueryui.com/position/).如果您不使用此脚本,请将clearButtonPosition选项设置为false并使用CSS定位它.