10
votes

JQuery Autocomplete Les lignes mettent en surbrillance sur Sélectionner

J'utilise jQuery ui autocomplete .

Lorsque la boîte de suggestion apparaît et que l'utilisateur appuie sur la touche BAS ( Ou ils déplacent la souris sur une suggestion), j'ai besoin que toute la ligne soit mise en évidence. Jusqu'à présent, lorsque vous appuyez sur la touche BAS, seul le fond de l'hyperlien est mis en surbrillance. J'ai essayé de coiffer la classe UI-State-Hover, mais cela n'est utilisé que sur l'élément d'ancrage. Je ne peux pas comprendre comment mettre en surbrillance l'élément LI.

Voici mon CSS jusqu'à présent: xxx

edit: Pour en faire un peu plus clair, l'autocomplete génère ses éléments comme: xxx

lorsque la touche BAS est enfoncée, l'élément d'ancrage obtient automatiquement la classe UI-State-Hover .


2 commentaires

Pourriez-vous obtenir plus de détails car dans l'exemple que vous avez envoyé lorsque vous appuyez sur la touche DAFT ou déplacez la souris sur l'élément, la ligne est mise en surbrillance. Voulez-vous ajouter plus de fonctionnalités?


Non, il ne s'agit pas de fonctionnalité. En appuyant sur la touche DOWN déclenche déjà l'élément d'ancrage de l'élément de la liste pour obtenir une nouvelle classe "UI-State-Hover". Je parviens à faire fond de l'élément d'ancrage la couleur que je veux. Ce que je voudrais faire, c'est rendre l'élément de la liste complète contenant l'élément d'ancrage de la même couleur que l'élément d'ancrage en surbrillance.


3 Réponses :


1
votes

Vous pouvez utiliser des événements: xxx

LI La variable est ce dont vous avez besoin. Vous pouvez changer de style ou ajouter la classe comme vous le souhaitez.


5 commentaires

J'ai essayé d'utiliser l'événement de mise au point comme celui-ci: Focus: fonction (événement, UI) {$ ("ui-autocomplete li a"). Parent (). Removeclass ("UI-State-Hover"); $ (". UI-autocomplete Li A.ui-State-Hover"). Parent (). AddClass ("Ui-State-Hover");}. Le problème est que les cas où deux éléments sont mis en évidence en même temps et peuvent être déroutants pour l'utilisateur. Je pense que c'est parce que lorsque l'événement de la mise au point est appelé.


L'idée n'est pas seulement dans l'événement de mise au point mais d'obtenir un élément cible de l'objet événement. $ (event.srelement) .parent ()


Votre solution a le même effet que mon code. J'ai finalement trouvé la réponse, ce n'était qu'une question de CSS. Merci quand même !


J'étais curieux ce que événement était. Heureux je sais sur srelement maintenant. Où au monde avez-vous découvert la syntaxe de Srelement?


Srelement fait partie de JavaScript, pas JQuery.Vous pouvez en lire à propos de ici ou dans les normes.



5
votes

Être un débutant dans CSS, je ne l'ai pas vu précédemment: je n'ai eu que de faire le style d'élément d'ancrage Affichage: Block . Au cas où n'importe qui est déjà rentré à nouveau.


2 commentaires

C'est merveilleusement simple et je ne peux pas croire que je l'ai manqué, mais je dois noter que cela ne fonctionne pas si vous utilisez des touches fléchées.


C'est la solution la plus simple



29
votes

J'avais exactement le même problème, résolu par: xxx


1 commentaires

C'est ce que je cherche