在每次选择后阻止Jquery自动完成选项关闭

我正在使用Jquery UI的自动完成功能来获取多个可选值.一切都很好,除了每个选择后选项列表关闭.我希望选项保持开放,直到用户决定完成选择.我查看了文档,但我没有看到任何方法来保持选项的开放性.有任何想法吗？

Mehran.. 8

您可以执行以下操作:首先定义一个名为的变量readyToClose,并将其设置false为开头.如果要在下一个选择中关闭菜单,请将此变量设置为true.而且我们应该重新实现closeJQuery UI 的方法.

在这里,我close在您的代码中重新实现了JQuery UI 的方法,而不是在源文件中!这与我们以自定义方式呈现列表的方式相同(例如http://jqueryui.com/demos/autocomplete/custom-data.html)

var readyToClose = false;
$( "#tags" ).autocomplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
}).data( "autocomplete" ).close = function(e){
    if(readyToClose)
        clearTimeout(this.closing), this.menu.element.is(":visible") && (this.menu.element.hide(), this.menu.deactivate(), this._trigger("close", e));
    else
        return false;    
};

注意:在较新版本的jQuery(即1.9.0)中,将"autocomplete"替换为"uiAutocomplete",如下所示:

$("#tags")
    .autocomplete({...})
    .data("uiAutocomplete").close = ...

小智.. 5

我知道这是一个古老的问题，可能不再与OP相关，但是为了完整起见，一个更干净的解决方案是对extendautocomplete小部件和overriding _close以及extend在select事件处理程序中添加事件对象。这样，您便可以执行自定义逻辑来确定是否应基于个案（逐个事件）关闭菜单。另请参见http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

//override the autocomplete widget
jQuery.widget( "ui.autocomplete", jQuery.ui.autocomplete, {
    _close: function( event ) {
        if(event!== undefined && event.keepOpen===true) {
            //trigger new search with current value
            this.search( null, event );
            return true;
        }
        //otherwise invoke the original
        return this._super( event );
    }
});

$('ac').autocomplete(
    {
        ...custom options...
        select: function( event, ui ) {
            ...custom logic...
            if(menu should remain open) {
                //extend original event with special flag to keep dropdown open
                //the o-event continues to be passed through the chain of listeners
                //and will end up being processed during _close()
                jQuery.extend(event.originalEvent,{keepOpen:true});
                //modify value as required
                jQuery(this).val(...);
                return false; //prevent selected value from being set,
                              //i.e. keeping modified value above
            }
        }
    }
);

在上面的jQuery.extend（event.originalEvent，{keepOpen：true}）; 用于向添加特殊keepOpen属性event.originalEvent。由于extend修改了原始对象（第一个参数），因此对该对象的任何后续使用event.originalEvent将使此属性可用。阅读并逐步执行代码后，它最终成为event该_close方法中引用的同一对象。如果将来发生此更改，此代码将中断，但是，与18个月前建议的Ingredient_15939相比，维护起来要容易得多。

您可以执行以下操作:首先定义一个名为的变量readyToClose,并将其设置false为开头.如果要在下一个选择中关闭菜单,请将此变量设置为true.而且我们应该重新实现closeJQuery UI 的方法.

在这里,我close在您的代码中重新实现了JQuery UI 的方法,而不是在源文件中!这与我们以自定义方式呈现列表的方式相同(例如http://jqueryui.com/demos/autocomplete/custom-data.html)

var readyToClose = false;
$( "#tags" ).autocomplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
}).data( "autocomplete" ).close = function(e){
    if(readyToClose)
        clearTimeout(this.closing), this.menu.element.is(":visible") && (this.menu.element.hide(), this.menu.deactivate(), this._trigger("close", e));
    else
        return false;    
};

注意:在较新版本的jQuery(即1.9.0)中,将"autocomplete"替换为"uiAutocomplete",如下所示:

$("#tags")
    .autocomplete({...})
    .data("uiAutocomplete").close = ...

我知道这是一个古老的问题，可能不再与OP相关，但是为了完整起见，一个更干净的解决方案是对extendautocomplete小部件和overriding _close以及extend在select事件处理程序中添加事件对象。这样，您便可以执行自定义逻辑来确定是否应基于个案（逐个事件）关闭菜单。另请参见http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

//override the autocomplete widget
jQuery.widget( "ui.autocomplete", jQuery.ui.autocomplete, {
    _close: function( event ) {
        if(event!== undefined && event.keepOpen===true) {
            //trigger new search with current value
            this.search( null, event );
            return true;
        }
        //otherwise invoke the original
        return this._super( event );
    }
});

$('ac').autocomplete(
    {
        ...custom options...
        select: function( event, ui ) {
            ...custom logic...
            if(menu should remain open) {
                //extend original event with special flag to keep dropdown open
                //the o-event continues to be passed through the chain of listeners
                //and will end up being processed during _close()
                jQuery.extend(event.originalEvent,{keepOpen:true});
                //modify value as required
                jQuery(this).val(...);
                return false; //prevent selected value from being set,
                              //i.e. keeping modified value above
            }
        }
    }
);

在上面的jQuery.extend（event.originalEvent，{keepOpen：true}）; 用于向添加特殊keepOpen属性event.originalEvent。由于extend修改了原始对象（第一个参数），因此对该对象的任何后续使用event.originalEvent将使此属性可用。阅读并逐步执行代码后，它最终成为event该_close方法中引用的同一对象。如果将来发生此更改，此代码将中断，但是，与18个月前建议的Ingredient_15939相比，维护起来要容易得多。