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

【问题标题】：how to add a clear button in jquery autocomplete如何在jquery自动完成中添加一个清除按钮
【发布时间】：2014-08-19 07:17:13
【问题描述】：

如何添加清除按钮 jquery 自动完成。添加我真正需要的图片。

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

我正在添加 jQuery 自动补全。没有css ..

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

【问题讨论】：

您是否对按钮的 html/css 或关闭自动完成功能的 javascript 有问题？
这不是很清楚，你想删除列表还是只隐藏一次？无论哪种方式，谷歌搜索似乎并不难。或者只是右键单击检查容器例如，注意 css 类/id/whatever 并调用 $(".thingy").css('display', 'none');例如..
添加html和css代码
我正在添加 jQuery 自动补全。没有css..

标签： jquery html internet-explorer google-chrome firefox

【解决方案1】：

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

我也有同样的需求，最后我为 jQuery UI Autocomplete 插件编写了一个小扩展。

脚本

完整代码在这里：

;(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);

用法

在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 定位。

【讨论】：

【解决方案2】：

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

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

JSFiddle demo here

【讨论】：

它必须清除搜索文本框。它在ie10+中自动出现，但在其他浏览器中没有。
我无法得到你。清楚地解释问题，并且在 jsfiddle 中我错误地添加了搜索图标来代替取消
这对我不起作用。当您在输入之外单击时，该字段会丢失模糊，并关闭结果，而不是因为单击按钮。