jquery-ui - jQuery UI自动完成功能禁用选择和关闭事件

Question

我使用的jQuery UI的自动完成功能与可能创建的方式略有不同。

基本上，我希望保留所有相同的功能，唯一的区别是，当建议框出现时，我不会在用户进行选择时隐藏建议框，并且我也不希望该选择填充输入框.autocomplete附加到的。

因此，我一直在阅读jQuery UI文档，似乎有一种方法可以禁用Select：和Close：事件，但是我发现他们对它的解释非常混乱，因此这就是为什么在这里寻求帮助。

我的jQuery

$( "#comment" ).autocomplete({
    source: "comments.php",
    minLength: 4,

    // Attempt to remove click/select functionality - may be a better way to do this        
    select: function( event, ui ) {
        return false;
    },
    // Attempt to add custom Class to the open Suggestion box - may be a better way
    open : function (event, ui) {
        $(this).addClass("suggestion-box");
    },
    // Attempt to cancel the Close event, so when someone makes a selection, the box does not close
    close : function (event, ui) {
        return false;   
    }
});

官方jQuery UI文档


从菜单中选择一个项目时触发； ui.item引用选定的项目。
select的默认操作是将文本字段的值替换为
选择的项目。取消此事件可防止值被更新，但不会
防止菜单关闭。


代码示例

Supply a callback function to handle the select event as an init option.
$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

混乱

令我困惑的是，他们似乎建议删除.autocomplete并替换为.bind（“ autocompleteselect”）-这将完全禁用自动完成功能？

非常感谢您提供的任何帮助。

Answer 1

使用.bind()的第二种语法只是将事件处理程序附加到jQueryUI的自定义事件的另一种方法。这与在窗口小部件选项中定义事件处理程序完全相同（使用select: function(event, ui) { }）

想象一下，如果页面上有几个自动完成的小部件，并且想在它们中的任何一个引发“ select”事件时执行相同的功能，例如：

$(".autocomplete").bind("autocompleteselect", function(event, ui) {
    /* Will occur when any element with an autocomplete widget fires the
     * autocomplete select event.
     */
});

至于取消 select事件，您有正确的选择。但是，取消 close事件要困难一些。从事件处理程序返回false似乎无法正常工作（实际上关闭菜单后会触发 close）。您可以进行一些黑客操作，只需将 select函数替换为您自己的函数即可：

var $input = $("input").autocomplete({
    source: ['Hello', 'Goodbye', 'Foo', 'Bar']
});
$input.data("autocomplete").menu.options.selected = function(event, ui) { 
    var item = ui.item.data( "item.autocomplete" );
    $input.focus();
};

这是一个可行的示例： http://jsfiddle.net/ZGmyp/

我不确定覆盖close事件的后果是什么，但是在简单的示例中看起来好像没有发生任何疯狂的事情。我会说这是对窗口小部件的不自然使用，因此可能会产生意想不到的后果。