J'ai un champ autocomplete de travail dans mon application Web et je recherche un moyen d'accroître la convivialité du terrain en sautant automatiquement les champs de catégorie lorsqu'une flèche est utilisée pour faire défiler les choix disponibles ( après avoir tapé dans un terme de recherche partielle).
Par exemple, si un utilisateur commence à taper "an", l'autocomplete affichera deux catégories avec des éléments de chacun. L'utilisateur souhaite sélectionner l'un des éléments de la liste sous "Personnes". Ils utilisent la flèche pour descendre la liste. Actuellement, ce code insère les catégories dans les résultats en tant qu'élément de liste. Lorsque vous utilisez les touches fléchées, vous devez les déplacer les avoir transmis afin de mettre en évidence et de sélectionner un résultat. Toute façon dont l'application pourrait automatiquement sauter ces en-têtes de catégorie?
3 Réponses :
Cette ligne: cause le problème. , le widget utilise des éléments de liste avec une classe Supprimer la classe et votre code fonctionne comme Vous voulez qu'il suivant: ici, il fonctionne: ui-menu-item pour distinguer s'il s'agit ou non d'un Li est un élément de menu réel qui peut être sélectionné. Lorsque vous appuyez sur la touche 'BAS', le widget recherche l'élément suivant avec un élément de menu de classe ui-menu et le déplace.
Parfait, c'était beaucoup plus facile que ce que je pensais que ce serait. Merci de votre aide.
@Arcdegree: Pas de problème, content d'aider :)
Depuis 1.10.4 Cela ne fonctionne plus, en raison de cela - Menu: Supprimer les exigences Pour les ancres dans les éléments de menu . En effet, les ancrages ont été supprimés, il n'y a plus aucune distinction entre les éléments li , tous reçoivent UI-Menu-item-item classe, quel que soit le signe de la spécification ou non .
Étant donné que la réponse acceptée ne fonctionne pas dans les dernières versions de Jqueryui (> 1.10.4), je posterai mon hack, peut-être que quelqu'un le trouvera utile.
J'utilise Jqueryui 1.12.0 P >
tandis que l'Ajout de la catégorie I Ajoutée une nouvelle classe, je l'ai appelée "CatégorieItem": P>
$.widget("ui.menu", $.extend({}, $.ui.menu.prototype, {
refresh: function() {
var menus, items, newSubmenus, newItems, newWrappers,
that = this,
icon = this.options.icons.submenu,
submenus = this.element.find( this.options.menus );
this._toggleClass( "ui-menu-icons", null, !!this.element.find( ".ui-icon" ).length );
// Initialize nested menus
newSubmenus = submenus.filter( ":not(.ui-menu)" )
.hide()
.attr( {
role: this.options.role,
"aria-hidden": "true",
"aria-expanded": "false"
} )
.each( function() {
var menu = $( this ),
item = menu.prev(),
submenuCaret = $( "<span>" ).data( "ui-menu-submenu-caret", true );
that._addClass( submenuCaret, "ui-menu-icon", "ui-icon " + icon );
item
.attr( "aria-haspopup", "true" )
.prepend( submenuCaret );
menu.attr( "aria-labelledby", item.attr( "id" ) );
} );
this._addClass( newSubmenus, "ui-menu", "ui-widget ui-widget-content ui-front" );
menus = submenus.add( this.element );
items = menus.find( this.options.items );
// Initialize menu-items containing spaces and/or dashes only as dividers
items.not( ".ui-menu-item" ).each( function() {
var item = $( this );
if ( that._isDivider( item ) ) {
that._addClass( item, "ui-menu-divider", "ui-widget-content" );
}
} );
// Don't refresh list items that are already adapted
newItems = items.not( ".ui-menu-item, .ui-menu-divider" ).not(".categoryItem");
newWrappers = newItems.children()
.not( ".ui-menu" )
.uniqueId()
.attr( {
tabIndex: -1,
role: this._itemRole()
} );
this._addClass( newItems, "ui-menu-item" )
._addClass( newWrappers, "ui-menu-item-wrapper" );
// Add aria-disabled attribute to any disabled menu item
items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
// If the active item has been removed, blur the menu
if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
this.blur();
}
},
_move: function( direction, filter, event ) {
var next;
if ( this.active ) {
if ( direction === "first" || direction === "last" ) {
next = this.active
[ direction === "first" ? "prevAll" : "nextAll" ]( ".ui-menu-item" )
.eq( -1 );
} else {
next = this.active
[ direction + "All" ]( ".ui-menu-item" )
.eq( 0 );
}
}
if ( !next || !next.length || !this.active ) {
next = this.activeMenu.find( this.options.items ).not(".categoryItem")[ filter ]();
}
this.focus( event, next );
}
}));
Pour quelqu'un d'autre qui a fini ici, essayant d'obtenir des catégories pour fonctionner bien à JQueryui 1.12 ...