jquery - 防止 Jquery 自动完成选项在每次选择后关闭

Question

我正在使用Jquery UI's autocomplete for multiple selectable values 。一切都很好，除了每次选择后选项列表都会关闭。我希望选项保持打开状态，直到用户决定完成选择。我浏览了文档，但没有找到任何方法来保持选项打开。有什么想法吗？

<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。我们还应该重新实现 JQuery UI 的 close 方法。

这里我在您的代码中重新实现了 JQuery UI 的 close 方法，而不是在源文件中!这与我们以自定义方式呈现列表所做的操作相同(例如 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 = ...