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

问题描述：

我正在将 jQuery UI的自动完成功能用于多个可选值.一切都很好，只是选项列表在每次选择后都会关闭.我希望这些选项保持打开状态，直到用户决定完成选择为止.我已经浏览了文档，但看不到任何使选项保持打开状态的方法.有什么想法吗?

I am using Jquery UI's autocomplete for multiple selectable values. All is good except the list of options closes after each selection. I would like the options to stay open until the user decides they are done making selections. I have looked through the documentation and I don't see any way to keep the options open. Any ideas?

<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>

标签编程语言:

Tag programming languages:

答

您可以执行以下操作: 首先定义一个名为readyToClose的变量，并在开始时将其设置为false.而且，当您想在下一个选择上关闭菜单时，请将此变量设置为true.而且，我们还应该重新实现JQuery UI的close方法.

You can do something like this: first define a variable named readyToClose and set it to be false at the begining. And when you want to close your menu on next selection, set this variable to the true. And also we should reimplement the close method of JQuery UI.

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

Here I reimplemented the close method of JQuery UI in your code, not in the source file! This is the same thing we do to render the list in custom way (e.g. 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"，如下所示:

Note: In newer versions of jQuery (i.e. 1.9.0), replace "autocomplete" with "uiAutocomplete", as in:

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

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

相关推荐