Chosen: Récupérer depuis une source de données distante

C'est un peu mieux que jquery auto complete n'est-ce pas ? J'aimerais voir éventuellement des sources de données distantes (la possibilité de fournir un rappel pour les résultats de la recherche)

Je troisième cette demande. Ce serait très pratique d'avoir la possibilité de spécifier une source distante, tout comme la fonction de saisie semi-automatique de jQuery UI.

Ou peut-être encore mieux : Inclure choisi dans l'interface utilisateur jQuery. :)

+1

plus précisément, mon +1 est pour l'idée d'utiliser une source de données distante avec une entrée de texte libre (par exemple, en utilisant des appels ajax pour faciliter le balisage)

Désolé, je n'ai pas été assez clair, mais l'intégration de "source de données distante" est ce que je voulais dire à l'origine, merci de l'avoir signalé. Bien sûr, ce plugin est bien meilleur que la fonctionnalité jQuery Auto Complete. Comme daFish l'a commenté, j'aimerais voir cela dans le cadre de jQuery UI lui-même.

+1 pour la prise en charge des sources de données à distance

Je ne comprends pas. Chosen concerne l'amélioration de la convivialité et de la beauté des éléments SELECT , et non la saisie semi-automatique ou la récupération de données distantes. Si vous voulez des données distantes, collectez-les et mettez-les dans le DOM avant l'appel choisi…

@juanghurtado : si j'ai une boîte à sélection multiple contenant 300 000 éléments, je ne peux pas vraiment l'écrire entièrement en html. Chosen fournit l'interface parfaite pour la recherche et la sélection. il existe de nombreuses autres bibliothèques qui fournissent cette fonctionnalité, c'est-à-dire [1], [2] et bien d'autres. De tous ces Chosen fonctionne le mieux, mais il ne prend pas en charge de très grandes collections - ce que le support de la source de données distante ajouterait. De plus, si Chosen supportait cela, cela signifierait devoir peaufiner et tenir à jour un plugin au lieu de deux.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Eh bien, si vous avez 300 000 articles sur votre article SELECT , (à mon humble avis), vous faites quelque chose de mal… Il existe de nombreuses options pour mieux gérer cette interface.

Chosen pourrait faire beaucoup de choses… Comme des couteaux de l'armée, il pourrait faire beaucoup de choses (sources de données distantes, association d'images à des éléments, filtrage personnalisé, requêtes AJAX…) et cesser d'être l'outil parfait pour un seul (meilleure interface pour SELECT traditionnel éléments

Le 10/08/2011, à 22h56, ivaynberg écrit :

@juanghurtado : si j'ai une boîte à sélection multiple contenant 300 000 éléments, je ne peux pas vraiment l'écrire entièrement en html. Chosen fournit l'interface parfaite pour la recherche et la sélection. il existe de nombreuses autres bibliothèques qui fournissent cette fonctionnalité, c'est-à-dire [1], [2] et bien d'autres. De tous ces Chosen fonctionne le mieux, mais il ne prend pas en charge de très grandes collections - ce que le support de la source de données distante ajouterait. De plus, si Chosen supportait cela, cela signifierait devoir peaufiner et tenir à jour un plugin au lieu de deux.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Répondez directement à cet e-mail ou consultez-le sur GitHub :
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

Je ne peux pas vraiment discuter avec ça...

Je veux obtenir des données distantes lors de la recherche à partir de choisi, comme le plugin de saisie semi-automatique jquery, aidez-moi s'il vous plaît

+1 pour prendre en charge les données distantes.

tout ce que vous regardez, votre interface utilisateur est agréable, mais certains problèmes se posent, comme ne pas prendre en charge les données distantes.

Je pense que c'est faisable mais pas aussi facile qu'on pourrait le penser. Puisqu'il s'agit de github et d'open source, regardons un peu de code.

@juanghurtado Je pense aussi que nous pouvons le faire sans gonfler les fonctionnalités existantes, jquery et prototype nous donnent tout ce dont nous avons besoin pour les sources de données distantes.

results_search() semble être déclenché lors des pressions sur les touches - c'est là que je remplacerais le comportement par défaut de choisi. J'ai besoin de creuser un peu plus, mais il semble que si nous pouvons imiter winnow_results() et ajouter un moyen de montrer le comportement de chargement (par exemple, winnow_loading_results()), cela pourrait bien fonctionner.

Une autre fonction à examiner est winnow_results_clear();

Le plus difficile est de trouver comment intégrer cela en douceur dans Chosen. Cela devrait-il être dans les options ? Doit-il être juste une sous-classe? Et est-ce quelque chose que les développeurs principaux laisseraient dans le projet principal ?

En fait - nous devrions fermer ce problème, beaucoup de travail est en cours sur le #162 qui semble être tout ce que nous voudrions.

Je pensais juste ajouter qu'à notre époque, cette fonctionnalité est indispensable et j'espère vraiment qu'elle sera bientôt mise en œuvre. Dans toutes les autres manières choisies, c'est parfait. :)

Qu'est-il arrivé à ce problème de récupération à partir d'une source de données distante ?

Il est temps pour @pfiller de se joindre à la conversation, je suppose.

+1 j'aimerais bien voir ça

Je charge les valeurs distantes immédiatement lorsque la page est servie, donc si je ne peux pas mettre à jour ou récupérer de nouvelles données, si je pouvais au moins ajouter de nouvelles options à la sélection, je pourrais conserver le côté client jusqu'à ce que la page soit actualisée. Donc +1 à la récupération à distance et/ou +1 à la possibilité d'ajouter de nouvelles options. J'espère que cela a du sens...

+1 pour la demande de jaloka

J'ai une table avec 17500 enregistrements et quand je charge la page, elle devient lente et finalement elle plante... Je pense que si le moyen de rechercher des correspondances dans la table pouvait être implémenté, ce serait le meilleur.

Quelqu'un l'a implémenté : https://github.com/meltingice/ajax-chosen

Je ne suis pas un gourou de jQuery et en fait je n'y connais rien. Alors s'il vous plaît pardonnez ma façon désinvolte d'expliquer les choses. Je ne trouve vraiment pas les bons mots pour décrire mon problème. J'ai juste suivi cette instruction simple : ajouté une classe, mis le script et appelé la fonction. Tout fonctionnait très bien, sauf la page qui n'avait pas d'entrée de sélection dessus. Et je ne suis pas sûr que les données aillent avec l'aide d'Ajax. Tout ce que je peux supposer, c'est que les formulaires sont générés à partir de la table de la base de données MySQL. Sélectionnez les options d'entrée à partir de là. Au moins, il ressemblait à quand j'ai édité la page. Ainsi, lorsque je charge la page, je ne vois que la classe 'chzn-select' dans mon entrée select, ce qui signifie que le script ne fonctionne pas du tout. En lisant les problèmes liés, j'ai compris que c'était à cause de la source de données distante, mais je ne comprends pas comment y remédier. En fait, je ne comprends pas vraiment de quoi vous parlez ici. J'ai essayé Ajax-choisi ci-dessus sans succès et j'ai essayé d'autres "hacks" mentionnés ici. Quelqu'un peut-il expliquer avec des mots simples s'il est possible de faire quelque chose dans mon cas ou non ?

J'utilise jQuery 1.4.2, essayé à la fois sur Mac OS et Windows. Vous pouvez le vérifier ici : http://94.125.8.168/eng/ (cliquez sur l'onglet Recherche ou Horaires dans le bloc central intitulé Informations sur les vols). Sélectionne la destination, le numéro de vol et l'aéroport sont censés avoir choisi.

@ffiona Vous devez envelopper votre appel choisi dans une fonction prête pour jQuery .

$(document).ready(function() {
  $(".chzn-select").chosen();
});

Veuillez essayer de garder les questions futures sur le sujet d'un fil de discussion. Si vous avez une question, vous pouvez ouvrir un nouveau sujet.

@pfiller est-ce une fonctionnalité sur laquelle vous travaillez ou travaillerez ? J'ai essayé tous les autres hacks choisis par ajax mais aucun d'eux ne fonctionne vraiment. J'en ai vraiment besoin parce que je travaille sur une application boursière que l'utilisateur tape dans des symboles boursiers qui, comme vous le savez, peuvent en avoir des dizaines de milliers.

@all , il semble que mon option pour obtenir l'achèvement automatique ajax à partir de choisi sera longue et je devrai peut-être chercher des alternatives. quelqu'un peut-il recommander d'autres alternatives à choisir avec cette fonctionnalité ?

J'en ai aussi créé un récemment.. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev avez-vous une démo en direct quelque part ?

@jaequery
Juste rapidement piraté un exemple http://sykulev.com/ajaxchosen/index.html

J'ai ajouté le code sous /example dans mon référentiel.

@ksykulev : votre version fait un très bon travail avec les sélections simples, merci ! Au fait, cela ne fonctionne pas avec la multisélection. Je vais peut-être y jeter un œil si j'ai un peu de temps libre.

La version de @meltingice fait aussi des choses vraiment bizarres sur multiselect, je pense que c'est parce qu'elle n'utilise pas du tout les fonctions Chosen (donc toutes les choses qui sont naturellement résolues dans la bibliothèque d'origine ne sont pas dans la version ajax, par exemple le repositionnement des entrées et redimensionnement une fois les résultats renvoyés au client).

@jbbarth : Oui, vous avez raison, je ne l'ai pas testé avec des sélections multiples, donc je ne peux qu'imaginer que cela ne fonctionne pas très bien. En termes d'exhaustivité de ma bibliothèque, je peux certainement ajouter un support pour ceux-ci. Je vais m'y mettre. Merci!

J'ai fini par rouler ma propre version avec un look and feel basé sur Chosen.

https://github.com/ivaynberg/select2

il prend en charge les ensembles de données distants ajax/jsonp et le défilement infini (chargement paresseux d'ensembles de données distants paginés). pas encore de prise en charge de la multisélection.

@ivaynberg Je suis tous les yeux sur ça.

Une fois que vous avez atteint la parodie de fonctionnalité avec Chosen (en particulier la prise en charge de la multisélection de type balise), vous devez absolument remonter ce fil.

J'adore l'apparence de Chosen, mais cela laisse vraiment à désirer dans la mise en œuvre.

Très, très beau travail !

@ivaynberg J'ai remarqué que vous avez toujours du code de choisi qui calcule spécifiquement les largeurs d'entrée de la liste déroulante et de la recherche.

Vous voudrez peut-être vérifier ceci : https://github.com/harvesthq/chosen/pull/407

J'ai récemment mis à jour ma version ajax choisie pour prendre en charge plusieurs sélections. http://sykulev.com/ajaxchosen/index.html

@justindujardin Select2 master a désormais la parité des fonctionnalités. Je vais jeter un œil aux éléments de dimensionnement en 407, mais nous devrions poursuivre les discussions sur le projet de Select2.

J'adore Select2 et je recommande à TOUT LE MONDE d'y passer. Il h.

@ProLoser - merci pour ça... exactement ce que je cherchais. Cela ressemble à une bien meilleure option.

Sélectionnez2 FTW !

Select2 est la voie à suivre !

Des nouvelles après toutes ces années ?

Pourquoi manquer une telle fonctionnalité imp ?

hum... ça pue. J'ai décidé d'implémenter Chosen à cause de la surbrillance du texte, mais je ne savais pas qu'AJAX allait être si difficile à ajouter. Je suppose que j'aurais dû choisir select2 si tout le monde quitte le navire pour aller à cela afin de répondre aux exigences. :(

C'est une excellente fonctionnalité. De nombreux forks proposent cette fonctionnalité mais l'implémentation est souvent chaotique. :+1:

J'ai trouvé une solution simple de patch de singe:

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

Vous pouvez fournir une option de fonction 'source' pour choisi qui sera appelée lors du rendu des résultats. Il aura une valeur d'entrée de chaîne et des arguments de fonction de rappel. La fonction de rappel rend des suggestions. Si les résultats n'ont pas dû changer, vous devez l'appeler immédiatement sans arguments, sinon vous pouvez demander des résultats et les envoyer au rappel lorsque vous les avez. L'objet de résultats a ce format : { value: "label", value2: "label2" } . Voici un exemple:

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

Ce que @faucct suggère semble fonctionner. Une remarque mineure cependant est que si vous utilisez la version jquery, vous ne pourrez pas accéder à AbstractChosen, en dehors de la portée choisie, donc vous voudrez probablement ajouter ces fichiers à la portée intérieure choisie ou vous devrez modifier le fichier js choisi et déplacez AbstractChosen et SelectParser vers la portée globale. Un autre problème est qu'il met à jour la liste ouverte (les div choisis créent) mais il ne met pas à jour le "champ de sélection" réel, donc une option que vous avez sélectionnée si elle n'existe pas dans la sélection peut générer une erreur. Une chose à noter également est que la chaîne que vous avez écrite est également utilisée pour filtrer les résultats que vous renvoyez. De plus, cela fonctionne à chaque fois que vous tapez quelque chose, vous avez donc le contrôle manuel pour ne pas passer d'appels.

J'ai trouvé une autre extension est celle-ci : https://github.com/meltingice/ajax-chosen

Cela fonctionne plutôt bien mais la version actuelle est cassée, vous avez fait quelques modifications mineures. Vous devez remplacer "chzn" par "chosen" car la bibliothèque choisie a changé ses noms css internes. Le dernier changement que vous devez faire est de déclencher " selected: updated " au lieu de " listz:updated ". Dans le fichier readme, il vous est demandé de corriger un bogue dans le css, mais il est déjà corrigé dans les versions plus récentes, vous n'avez donc pas besoin de le faire. Vous pouvez également définir des options utiles et si l'utilisateur continue d'écrire, le système annule également les appels en attente.

C'était mon voyage :), j'espère que ça aide.

J'ai résolu ce problème en créant un plugin qui gère la source de données distante pour le choix, j'espère que vous pourrez tous en profiter

choisi-remote-source (https://github.com/westonganger/chosen-remote-source)

L'ensemble du code est assez simple avec moins de 200 lignes de code
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

La seule partie de Chosen qui devait être corrigée était la suivante :

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH