jQuery UI的自动完成禁用选择和放大器;关闭事件 [英] 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的文档，而且似乎有一种方法来禁用的选择：与关闭：事件，但我发现他们已经解释的方式是非常混乱的，因此，此就是为什么我在这里寻求帮助。

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指所选择的项目。
  的选择默认的动作是与的值替换的文本字段的值
  选择的项目。取消此事件prevents被更新的价值，但不
  prevent从关闭菜单。

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.

code例子

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.

推荐答案

使用第二个语法 .bi​​nd（）是附加一个事件处理程序jQueryUI的的定制的只是另一种方式事件。这是完全一样的定义的小部件选项里的事件处理程序（使用选择：函数（事件，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.
     */
});

至于取消选择事件，你有正确的。然而，取消关闭事件是一个有点艰难;它看起来像返回false从事件处理程序将无法正常工作（关闭被触发后，菜单实际上是封闭的）。你可以执行一个小两轮牛车，只是用自己替换选功能：

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/

我不知道什么样的影响是压倒一切的关闭事件，但它并不像疯狂的东西在简单的例子发生。我会说，这是一种不自然的使用Widget的，所以可能会有意想不到的后果。

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的自动完成禁用选择和放大器;关闭事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！