Formulaire de recherche avec gestion de "tags" en jQuery (MàJ)

Salut, c'est une bonne chose de proposer ce plugin !
J'ai hâte de regarder le code!

Avec plaisir, je fais ça pour me perfectionner et je ne sais pas si je l'utiliserais un jour donc plutôt que ça dorme dans mon PC je préfère que ça serve à quelqu'un.

Par contre, je ne suis pas sur qu'on puisse appeler ça un plugin à proprement parler, oui ?

Je me permet un petit up de mon post pour espérer avoir quelques retours afin d'améliorer mon système. Personne ne l'a testé ?

Salut!
Je trouve ton plugin très bien, cependant, il y a une grosse lacune à mon gout (comme sur le site que tu as pris comme exemple pour t'en inspiré), il n'y a pas de réel recherche sur les tags en les intégrants, exemple sur ton plugin, si je tape 'jquery' il ne va pas le prendre directement dans la liste et me le proposer.
N'aillant aucune connaissance en JS, je ne peu malheureusement pas t'orrienter niveau code, cependant je te conseilles de jeter un coup d'oeil sur le plugin "chosen" gratuit sur github:
http://harvesthq.github.com/chosen/
Ce que tu es en train de faire s'appel sur ce plugin 'Multiple Select with Groups', sauf que tu y as ajouter du style, ce qui est pas mal du tout, en gros il faudrait pouvoir avoir le même style de fonctionnement que Chosen mais avec la personnalisation de la mise en forme.

Bon courage dans l'avancement de tes projets et de ton apprentissages ;)

Salut,
C'est pas con ce que tu dis, j'y avais pas pensé, en plus ça a pas l'air trop compliqué à faire.
Sur ton exemple, il intègre aussi un redimensionnement automatique du champ texte, c'est vraiment pas mal.

En tout cas merci pour ton retour, je vais essayer d'intégrer tout ça. :)

Salut !
Alors j'ai enfin pu analyser ton code et il y a des bonnes choses et des moins bonnes.

En bien :

• code commenté !!!! Ca c'est super, c'est tout con mais c'est la documentation du développeur et ça va t'aider lorsque tu reprendras le code dans 3 mois et nous ça nous aide à mieux comprendre ta réflexion sur ce plugin.
• code clair et structuré, on le voit c'est simple et clair à comprendre.

En moins bien :

• code non pluginifié : il va en effet être difficile de modifier le code pour l'adapter à notre structure.
• Il est nécessaire de taper beaucoup de code html pour pouvoir le faire fonctionner. L'idéal serait de n'avoir qu'un seul élément à créer, comme un select avec tous nos tags par exemple. Lorsque l'on lance le plugin, il va se charger de créer les inputs et de transformer le select en liste de div dans ta #tagbox. Plus c'est simple à configurer et plus il y aura de monde à l'utiliser !

Pour le 1er point, il existe pas mal de tutoriels et de façons de créer un plugin, voici la mienne (je commente en anglais) :

/**
 * new plugin template
 */
(function( $ ){
    $.fn.pluginTitle = function(options) {
        // get the called element
        var $container = $(this);
        // default options
        var DEFAULTS = {};
        // extend user options with the default options
        var options = $.extend(DEFAULTS, options);
        // execute the plugin for each called element
        return this.each(function(){
                    // code of the plugin
        });
    }
})( jQuery );

Pour ton deuxième élément, il te faut analyser le fonctionnement actuel et voir ce qui est vraiment nécessaire (ou modifié) par ton utilisateur. Cela sera l'élément obligatoire à intégrer avant de lancer le plugin. Tout le reste doit être créé par ton plugin (ton input par exemple).

En tout cas c'est du bon boulot, il ne te reste que quelques petits truc à fignoler pour le rendre vraiment vraiment super.

Bon courage !

Salut,

Tout d'abord, merci pour ce retour très constructif et tes bon conseils.
Pour te répondre, déjà, "code commenté", crois moi c'est parce que j'ai partagé mon code que je l'ai commenté, pour mes trucs perso, c'est loin de ressembler à ça, mais bon quand on attend des retours c'est la moindre des choses. ^^

"code non pluginifié", c'est ce que je disais dans ma première réponse, c'est vrai que ça pourrait être pas mal de faire carrément un plugin mais j'ai peur que je ne soit pas encore au niveau pour faire ça, ou peut-être est-ce tout simplement la prochaine étape de mon apprentissage.

Je vais commencer à apprendre sérieusement comment faire tout ça, car je suis bien conscient que "plus c'est simple, plus me monde va l'utiliser" mais je dois avouer que ce n'est pas le but principal, m'enfin, si ça peut plaire, pourquoi pas ^^.

En tout cas ce que tu me dis est encouragent et je t'en remercie, je reviens dès que j'ai du nouveau. :)

Ayé, j'ai tout fini !
Donc j'ai pluginifié la chose, finalement ça a été beaucoup plus simple que ce que je n'aurais pensé !^^

Bon, par contre, j'ai du supprimer les "catégories" parce que c'était moyennement adapté à cette nouvelle structure d'une part et aussi assez chiant à mettre en place, et puis finalement c'était plus cosmétique que pratique donc exit !

J'ai aussi rajouté un petit effet de redimensionnement sur le champ texte, c'est pas trop trop au point mais c'est pas gênant non plus.

Donc, c'est très simple à mettre en place du coup:

<!--On place la div ou on veut que le champ apparaisse-->
<div id="searchbox"></div>
<!--On place la div qui accueillera les résultats de la recherche-->
<div id="searchboxResult"></div>
<script type="text/javascript">
    // Et le plugin... C'est tout !
    $('#searchbox').searchbox({
        // Liste des tags à afficher
        tags: 'PHP, JavaScript, jQuery, HTML, Flash, Wordpress, CakePHP, Windows, MacOs, Linux, Tutos,Formations, Démos, CSS , Astuces',
        // Page à appeller pour effectuer la recherche
        action:'q.php',
        // Texte à afficher dans le champ texte
        // placeholder:'Rechercher...',
        // Activer la recherche instantanée
        // liveSearch : true,
    });
    </script>

Les sources sont toujours à dispo et j'ai même fait une version minifiée en plus de la version "normale" et commentée.
Voilà, encore merci à vous. :)

MàJ premier post. :)

Une idée serait de pouvoir lier ton plugin à un élément de type select et du coup, ton plugin récupère les <option> de celui ci. Cela permettrait de ne pas avoir à entrer les catégories et de le rendre ainsi plus simple. Le deuxième avantage est que celui ci va fonctionner dans un form et du coup va être bien plus intéressant car nous allons pouvoir créer du lien avec l'option 'action' de ton plugin.

Salut prbaron, désolé de ne répondre que si tard,
Alors, pour ta suggestion, pour être honnête je n'arrive pas à comprendre pourquoi ce serait plus simple, le fait d'avoir moins de code à taper en JS je suis d'accord mais c'est autant de code à taper en HTML non ?
Et puis est-ce que ça ne demande pas de restructurer totalement la chose ? (là j'avoue que ça me donne pas trop envie :p )

C'est plus simple car le système fonctionnerait toujours même sans JS. De plus ce plugin est lié à une recherche, donc implicitement à un formulaire. Du coup, le lier à un select et à un formulaire permet de ne pas avoir à remplir le champ action. Les tags seront certes plus long à écrire en HTML avec <option> mais on garde l'esprit de fallback si le JS n'est pas implémenté. De plus l'erreur sera plus facile à trouver avec un option. Enfin cela sera plus facile à lier avec un système dynamique. L'utilisateur pourra lier plus facilement les tags à des champs rentrés en base de données.