如何在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 }); ，如下所示：

clearButtonHtml

演示

此处的Codepen演示：http://codepen.io/andreivictor/pen/GmZWEJ。

其他信息

您还可以使用jQuery UI Position选项为此按钮设置HTML内容。此按钮的位置为clearButtonPosition脚本（http://api.jqueryui.com/position/）。如果您不使用此脚本，请将false选项设置为<div class="title"><a>TEXT1</a></div>... <div class="title"><a>TEXT2</a></div>... 并使用CSS定位。

Answer 2

使用CSS在输入字段中插入图像，然后使该图像可单击并将其放入脚本中：

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

JSFiddle demo here