建议打开时，从输入中删除底部边界半径

Question

我正在使用此自动填充插件：https://github.com/devbridge/jQuery-Autocomplete

使用onSearchComplete将类添加到输入中以删除边框半径但我在选择或隐藏时删除此类时遇到问题。

var $input = $('input[name=search]');
$input.autocomplete({
    onSearchStart : function(){ $input.addClass('autocomplete-loading') },
    onSearchComplete : function(){ $input.removeClass('autocomplete-loading').addClass('autocomplete-open') }
}); 

查看options不要认为有一种方法可以扩展onClose / etc所以查看源我需要修改hide：function但是如何从这个插件中选择输入？

演示：http://codepen.io/anon/pen/Fbdhy

Answer 1

您可以使用onSelect回调删除课程：

$input.autocomplete({
    serviceUrl: 'search.json',
    onSearchStart: function() {
        $(this).addClass('autocomplete-loading')
    },
    onSearchComplete: function() {
        $(this).removeClass('autocomplete-loading').addClass('autocomplete-open')
    },
    onSelect: function() {
        $(this).removeClass('autocomplete-loading autocomplete-open');
    },
    onHide : function() {
        $(this).removeClass('autocomplete-loading autocomplete-open');
    }
});

<强> UPD 即可。不幸的是，当使用外部点击或使用Escape键关闭下拉列表时，没有回调函数。在这种情况下，您可以通过扩展在这种情况下调用的Autocomplete.prototype.hide方法来自己添加此方法：

(function(original) {
    $.Autocomplete.prototype.hide = function() {
        this.options.onHide && this.options.onHide.call(this.element, this.options.params);
        original.apply(this, arguments);
    };
})($.Autocomplete.prototype.hide);

回调内部this也指向同一个输入元素，因此您可以使用$(this)。

演示：http://plnkr.co/edit/YQwpljoZnJbLpQzwWpxV?p=preview

Answer 2

如果你想使用hide： 您可以使用＆＃34;此＆＃34;

选择项目

hide: function () {
        var input = this;
        input.visible = false; //for hiding

        $(input).removeClass('abc').addClass('cba');
    }

如果你想使用onSearchComplete：我猜你可以从中检索3个元素

onSearchComplete: function(element, q, suggestions) {
                     //check element is the input
                     $(element).removeClass('abc').addClass('cba');
                }