Javascript Girl
  1. Javascript Girl
  3. Alternance GUI à <select> lorsque vous avez beaucoup d'options
Intereting Posts
Les interfaces en JavaScript sont-elles nécessaires? Angular Js force le navigateur pour effacer le cache Comment empêcher un élément de perdre son focus? Rafraîchir les données de données sans recharger la page entière JQuery définit plusieurs options déroulantes sur sélectionné Impossible d'obtenir la propriété 'addEventListener' Existe-t-il un moyen d'appliquer de multiples styles CSS dans un lot pour éviter plusieurs flux? Valeurs Falsey en JavaScript Les actions du contrôleur sont appelées deux fois – Application Php Liste de style racontant les divs Obtenir une erreur tout en détectant l'extension chrome installée ou ne pas utiliser javascript Erreur à l'intérieur de jquery.validate.js "erreur d'exécution javaScript: Impossible d'obtenir un" appel "de propriété de référence non définie ou nulle Google Visualisation Modification du type de données de colonne Comment puis-je utiliser yepnope.js avec $ (document) .ready () efficacement? Désactiver les navigateurs verticaux et les barres de défilement horizontales

Alternance GUI à <select> lorsque vous avez beaucoup d'options

Un <select> pourrait être bon pour choisir entre 3 à 15 éléments simples, mais comment faites-vous affaire à 15-100 +?

L'option la plus simple serait d'avoir simplement <select> avec beaucoup de <option> s, mais ce n'est pas très convivial. Il y a beaucoup de défilement et il pourrait être difficile de trouver l'option que vous recherchez. Le bénéfice est que vous pouvez (peut-être avec défilement) voir toutes les options que vous avez.

Une option plus avancée serait d'avoir un champ de texte avec une autocomplète. Un utilisateur tape une lettre ou deux, et les résultats de recherche reviennent sur lesquels vous choisissez. Il est plus facile de trouver l'option que vous recherchez – si vous savez ce que vous recherchez. L'inconvénient est que l'utilisateur ne peut pas voir toutes les options.

Une option encore plus avancée serait de créer un widget "recherche, liste et choix" qui affiche par défaut les éléments X, mais vous permet de rechercher. Un avantage de cette approche est que je peux autoriser la recherche sur plusieurs attributs et pas seulement le nom de l'objet qui doit être sélectionné.

  1. Quelles solutions avez-vous déployées dans ces situations?
  2. Y at-il un plugin jQuery dont je devrais connaître?

  1. La solution que j'aime utiliser est de fournir à l'utilisateur une liste de sélection avec toutes les options (si elles veulent regarder à travers elle), mais fournissent une fonction de saisie automatique qui recherche dans la liste à mesure qu'ils y entrent. Type d'hybride de vos premières et secondes options.
  2. En ce qui concerne les plug-ins, il y a un numéro (ainsi que la documentation qui vous mènera davantage) qui peuvent vous aider ici:

Vous pouvez essayer le plugin jquery déroutant de filtre rapide (UFD) . C'est de loin mon préféré et fonctionne très bien dans différents navigateurs, même c.-à-d. Il peut être facilement stylé et définitivement rapide. Il peut gérer des milliers d'articles et est plus rapide que l'autocomplete Combobox de jQuery UI

Vous devriez consulter Choosen http://harvesthq.github.io/chosen C'est un plugin jQuery qui génère une sélection plus agréable avec un champ de texte à rechercher. Cette solution permet à l'utilisateur de voir toutes les options et de rechercher l'une en particulier sans devoir faire défiler.

Il existe un plugin Autocomplete pour jQuery et il existe une autocomplète dans jQuery UI.

JQuery UI possède un contrôle AutoComplete . Vous pouvez lier ceci avec une fonction de rappel comme source de données et utiliser Ajax pour extraire de grands ensembles de données.

Une solution possible dont j'ai pu observer quelques bonnes implémentations textuelles est un sélecteur d'oeil de poisson utilisé sur les listes verticales. Il existe beaucoup d'exemples javascript / CSS , Flash et Java en ligne.

Si les options forment naturellement des groupes, vous pouvez envisager d'utiliser des optgroups HTML au lieu d'une solution javascript. Cela rend un large ensemble d'options beaucoup plus organisé et gérable, tout en conservant toutes les options visibles.

Je ne sais pas quel langage / cadre côté serveur que vous utilisez pour générer votre code HTML, mais par exemple dans Ruby on Rails, vous pouvez utiliser grouped_options_for_select pour générer des groupes opt.

J'aime bien que l'autocomplete sélectionne quand il y a plusieurs options à choisir. J'ai trouvé un exemple jQuery ici .

J'ai essayé ce qui suit comme suggéré dans les réponses ci-dessus: plugins.jquery.com/project/jquery-select-autocomplete docs.jquery.com/Plugins/Autocomplete/autocomplete jquery-ui.googlecode.com/svn/branches/labs/selectmenu / Undtrusive Fast-filter Dropdown (UFD)

Je trouvais que UFD était celui que j'aimais mieux car il se comportait comme un menu déroulant et avait beaucoup de polyvalence, et les autres étaient un peu buggés.

MAIS il ne m'a toujours pas donné de cohérence dans les navigateurs. Je veux qu'il fonctionne de la même manière dans tous les navigateurs. Par exemple: Dans un élément de sélection normal, si je tape la première lettre, il me conduira à la première option en commençant par cette lettre et si je tape sur Entrée, elle la sélectionnera, MAIS ici, elle diffère du navigateur vers le navigateur . Certains navigateurs déclenchent l'événement onchange lorsque Enter est activé et d'autres ne le font pas jusqu'à ce que la liste déroulante perd la mise au point.

UFD n'avait pas la consistance "onchange" que je recherchais