【问题标题】:JqueryUI Autocomplete: autoFocus = true won't do anythingJqueryUI Autocomplete: autoFocus = true 不会做任何事情
【发布时间】:2012-12-20 23:20:13
【问题描述】:

我有这个带有自动完成功能的输入:

.autocomplete({
                    source: "jsonR.php",
                    minLength: 2,
                    select: function( event, ui ) {
                            $(this).val(ui.item.value);
                            llamar('/includes/router.php?nomenu=1&que=view_item&id='+ui.item.id,'router');
                            return false;
                    },
                    autoFocus: true
                    ,open: function() {
                        $('.ui-autocomplete').addClass('searchBox');
                    } 
            })

基本上,我希望该功能选择第一项,因此如果用户按 Enter 键,它会搜索第一项 但这不会悬停/聚焦建议的第一个项目,

知道为什么吗?

ps:其余的都很好,面团

【问题讨论】:

标签: javascript jquery jquery-ui autocomplete jquery-ui-autocomplete


【解决方案1】:

Scott Gonzalez 为此编写了一个 selectfirst 插件。

在此处查看详细信息:http://forum.jquery.com/topic/autocomplete-automatically-select-first-item-in-dropdown-or-add-item-into-drop-down-menu

你可以在这里下载插件:https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js

更好的是,这里是插件的源代码:)

/*
 * jQuery UI Autocomplete Select First Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
(function( $ ) {

$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
    var autocomplete = $( this ).data( "autocomplete" ),
        menu = autocomplete.menu;

    if ( !autocomplete.options.selectFirst ) {
        return;
    }

    menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});

}( jQuery ));

注意:要使用它,只需将此行添加到您的自动完成中:

selectFirst: true, // auto selects first element

【讨论】:

  • 亲爱的!有了这个作品,但为什么自动对焦不做任何事情?谢谢!
  • 注意autoFocus: true, 将聚焦第一个元素,但不会选择它。
  • 我明白了!我在那里有一些概念组合......非常感谢!这可以满足我的需要
  • 此插件不再维护。
  • @Cagy79 - 不应该是一个问题,因为源包含在答案中。
猜你喜欢
  • 2013-04-19
  • 1970-01-01
  • 1970-01-01
  • 2013-04-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多