jquery-ui – jQuery UI自动完成禁用选择和关闭事件 - 代码日志

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

我使用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文档

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”) – 这将完全禁用自动完成?

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

使用.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.
     */
});

至于取消选择事件,你有正确的。但是,取消关闭事件有点困难;看起来从事件处理程序返回false将无法正常工作(菜单实际关闭后关闭)。你可以执行一些小黑客,只需用你自己的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/

我不知道这个后果是否超越了关闭事件,但在简单的例子中看起来并不像任何疯狂的事情。我会说这是一个非常自然的使用的小部件,所以可能会有意想不到的后果。

http://stackoverflow.com/questions/6043506/jquery-ui-autocomplete-disable-select-close-events

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:jquery-ui – jQuery UI自动完成禁用选择和关闭事件