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

标签 jquery jquery-ui

我正在使用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>
标记编程语言:

最佳答案

你可以这样做: 首先定义一个名为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 = ...

关于jquery - 防止 Jquery 自动完成选项在每次选择后关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3925153/

相关文章:

jquery - 使用主干的 jqueryUI 工具提示的位置

javascript - jQuery加载AJAX图片属性不能为 "seen"

javascript - 如何使用 jQuery 停止列表最后三个元素的操作

jquery - 使用 jQuery 将选项附加到选择,调整它的大小?

javascript - 如何从javascript中的rgb字符串中提取颜色值

jquery-ui - Jquery UI 日期选择器 日期范围 6 个月 限制

javascript - 如果删除了链接,则从 html 表中删除链接之间的空格

javascript - json响应,读取数据

javascript - 为什么 jquery 插件函数总是返回对象而不是字符串?

javascript - 在特定位置插入新标签?