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

Question

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

<meta charset="utf-8">

<script>
$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#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;
        }
    });
});
</script>

标签编程语言:

Answer 1

您可以执行以下操作:首先定义一个名为的变量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 = ...

Answer 2

我知道这是一个古老的问题，可能不再与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相比，维护起来要容易得多。

Answer 3

我自己刚刚遇到这个问题。这是为大家准备的一个简单的衬线，只需将其放入自动完成选项中即可。

$ac.autocomplete({
  ...
  close: function () { $('.ui-autocomplete').show() }
});

如果您想关闭它或者希望它在关闭时淡出，那么您可以分别删除 close 语句或简单地添加.fadeOut()到末尾。

$ac.autocomplete({
  ...
  close: function () { $('.ui-autocomplete').show().fadeOut() }
});

Answer 4

您可以处理自动完成关闭事件http://jqueryui.com/demos/autocomplete/#multiple

代码示例

提供一个回调函数来处理关闭事件作为 init 选项。

$( ".selector" ).autocomplete({
   close: function(event, ui) { ... }
});

通过类型绑定到关闭事件：autocompleteclose。

$( ".selector" ).bind( "autocompleteclose", function(event, ui) {
  ...
});