jQuery UI 自动完成禁用 Select &关闭事件 [英] jQuery UI Autocomplete disable Select & Close events

问题描述

我使用 jQuery UI 的自动完成功能与它可能创建的目的略有不同.

I'm using jQuery UI's Autocomplete slightly differently than it was probably created to do.

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

Basically I want to keep all the same functionality, the only difference is that when the suggestion box appears, I don't the suggestion box to hide when a user makes a selection and I also don't want that selection to populate the input box that .autocomplete is attached to.

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

So, I've been reading through the jQuery UI documentation, and it appears there is a way to disable the Select: and Close: events, but I find the way they have explained it to be very confusing and hence, this is why I'm here asking for help.

我的 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 的默认操作是将文本字段的值替换为所选项目.取消此事件会阻止更新值，但不会防止菜单关闭.

Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

代码示例

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") - 这将完全禁用自动完成功能?

What confuses me is that they seem to be suggesting to remove the .autocomplete and replace with .bind("autocompleteselect") - which will disable the autocomplete altogether?

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

Thank you very much for any help you can give.

推荐答案

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

The second syntax using .bind() is simply another way of attaching an event handler to jQueryUI's custom events. This is exactly the same as defining the event handler inside of the widget options (using select: function(event, ui) { })

想象一下，如果页面上有多个自动完成小部件，并且您想在其中任何一个引发选择"事件时执行相同的功能，例如:

Imagine if you had several autocomplete widgets on the page and you wanted to execute the same function when any of them raised the "select" event for example:

$(".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 函数替换为您自己的:

As for cancelling the select event, you have that correct. However, cancelling the close event is a little tougher; it looks like returning false from the event handler won't work (close is fired after the menu is actually closed). You could perform a little hackery and just replace the select function with your own:

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/

我不确定覆盖关闭事件的后果是什么，但在这个简单的例子中看起来并没有发生任何疯狂的事情.我会说这是小部件的一种不自然的使用，因此可能会出现意想不到的后果.

I am not sure what the ramifications are of overriding the close event, but it doesn't look like anything crazy is happening in the simple example. I would say that this is kind of an unnatural use of the widget, so there may be unexpected consequences.

这篇关于jQuery UI 自动完成禁用 Select &关闭事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！