Sujet Précédent Sujet Suivant

Gestion de recherche par dropdowns en multiselection -js/php

flxOri Messages postés 2 Date d'inscription jeudi 29 décembre 2022 Statut Membre Dernière intervention 29 décembre 2022 - 29 déc. 2022 à 17:45
flxOri Messages postés 2 Date d'inscription jeudi 29 décembre 2022 Statut Membre Dernière intervention 29 décembre 2022 - 29 déc. 2022 à 17:51

Bonjour, j'ai un problème que je n'arrive pas à résoudre et cela fait plusieurs jours maintenant. 

Mon site est orienté sur les voitures. Il implémente premièrement une partie de recherche sur les différents modèles de voiture. 

Je m'explique, j'ai plusieurs dropdowns de selections de préférences ( contsructeur, type...) comme sur une boutique en ligne de vêtements : on peut choisir la catégorie "pulls" et la couleur "gris". 

Dans mon cas, je voudrais pouvoir rechercher précisément un ensemble de modèles de voitures avec plusieurs préférences. 


Un exemple de recherche pourrait être = (Ford et Renault), (Berline), (Mondeo et Megane), (2018 et 2019 et 2020). Pour respectivement : (Constructeur), (Type), (Modèle), (Année).

Mes dropdowns de préférences sont générés en javascript pour être plus flexible. Il faut savoir aussi que j'ai réussi à faire les recherches pour chaque dropdown individuellement. Donc si je recherche un ou plusieurs constructeurs, cela fonctionne. Malheureusement quand j'ajoute un type avec le ou les constructeurs choisis, cela ne fonctionne plus.

Ensuite, j'aimerais pouvoir garder les préférences sélectionnées. En effet, quand je sélectionne un constructeur, j'aimerais que quand je valide (= quand la page est rechargée avec les bons résultats), les boutons radios soit toujours sélectionnés. 

J'ai exploré la piste des variables de session PHP et les cookies de js. Mais je ne vois pas trop comment faire.

Je met une capture d'écran et le code ci-dessous pour illustrer mes propos.
Merci d'avance pour une quelconque réponse et bon développement !! :)

Page du site concernée :

site exemple
On y voit les différents sélectionneurs de préférences.

Code du formulaire :

<!-formulaire pour le dropdown avec sélection CONSTRUCTEUR->
<form method="post" id="make_checkbox_select_constructeurs">

  <select name="Constructeurs" multiple="multiple" id="current_select">
      <?php 
            <!-requete sql pour obtenir mes resultats->
			$getAllConstructeurs = $bdd->query('SELECT * FROM constructeurs ORDER BY nom');
			$getAllConstructeurs->execute(array());

            <!-boucle pour afficher tous les contructeurs dans mon dropdown->
			foreach($getAllConstructeurs as $constructeur ){
       ?>
                <!-on affiche toutes les lignes du selecteur->
				<option value=<?= $constructeur['id']; ?> <?php echo $constructeur_selected; ?>><?= 
  $constructeur['nom']; ?></option>
      <?php
            }
    	?>
      
  </select>

  <input type="submit" class="sub-drop1"/>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
  <?php
    include("../scripts/checkboxConstructeurs.js");
  ?>
</script>

Le include "checkboxConstructeurs.js" :

$(function()
	{
		var mySelectCheckbox = new checkbox_select(
		{
			selector : "#make_checkbox_select_constructeurs",
			selected_translationOne : "Constructeur sélectionné",
            selected_translation : "Constructeurs sélectionnés",
            all_translation : "Tous les constructeurs",
            not_found : "Aucun constructeur trouvé",

			onApply : function(e)
			{
				window.location.assign("voitures.php?id_constructeur="+e.selected);
				
			},

			
		});
		
	});

Tout le script d'une "checkbox" :

// variable_names
// functionNames
// CONSTANT_VARIABLE_NAMES
// $_my_jquery_selected_element

if(typeof String.prototype.trim !== 'function') {
    
    String.prototype.trim = function()
    {
        return this.replace(/^\s+|\s+$/g, '');
    }
}

var checkbox_select = function(params)
{
    
    var error = false;

    // If the selector is not given
    if(!params.selector) {                                              console.error("selector needs to be defined"); error = true; }

    // If the selector is not a string
    if(typeof params.selector != "string") {                            console.error("selector needs to be a string"); error = true; }

    // If the element is not a form
    if(!$(params.selector).is("form")) {                                console.error("Element needs to be a form"); error = true; }

    // If the element doesn't contain a select
    if($(params.selector).find("select").length < 1) {                  console.error("Element needs to have a select in it"); error = true; }

    // If the element doesn't contain option elements
    if($(params.selector).find("option").length < 1) {                  console.error("Select element needs to have an option in it"); error = true; }

    // If the select element doesn't have a name attribute
    if($(params.selector).find('select').attr('name') == undefined) {   console.error("Select element needs to have a name attribute"); error = true; }

    // If there was an error at all, dont continue in the code.
    if(error)
        return false;

    // ----------------------------------------------------------------------------------------------------

    var that            = this,
        $_native_form   = $(params.selector),
        $_native_select = $_native_form.find('select'),
        
        // Variables
        selector                = params.selector,
        select_name             = $_native_select.attr('name').charAt(0).toUpperCase() + $_native_select.attr('name').substr(1),
        selected_translationOne    = params.selected_translationOne   ? params.selected_translationOne   : "selected",
        selected_translation    = params.selected_translation   ? params.selected_translation   : "selected",
        all_translation         = params.all_translation        ? params.all_translation        : "All " + select_name + "s",
        not_found_text          = params.not_found              ? params.not_found              : "No " + select_name + "s found.",
        currently_selected      = [],
        
        // Create the elements needed for the checkbox select
        $_parent_div    = $("<div />")      .addClass("checkbox_select"),
        $_select_anchor = $("<a />")        .addClass("checkbox_select_anchor")     .text( select_name ),
        $_search        = $("<input />")    .addClass("checkbox_select_search"),
        $_submit        = $("<input />")    .addClass("checkbox_select_submit")     .val("Appliquer") .attr('type','submit') .data("selected", ""),
        $_dropdown_div  = $("<div />")      .addClass("checkbox_select_dropdown"),
        $_not_found     = $("<span />")     .addClass("not_found hide")             .text(not_found_text),
        $_ul            = $("<ul />"),

        updateCurrentlySelected = function()
        {
            var selected = [];

            $_ul.find("input:checked").each(
                                                        
                function()
                {
                    selected.push($(this).val());
                }
            );

            

            currently_selected = selected;

            if(selected.length == 0)
            {
                    $_select_anchor.text( select_name )
            }
            else if(selected.length == 1)
            {
                $_select_anchor.text( selected.length + " " + selected_translationOne );
            }
            else if(selected.length ==  $_ul.find("input[type=checkbox]").length)
            {
                $_select_anchor.text( all_translation );
            }
            else
            {
                $_select_anchor.text( selected.length + " " + selected_translation );
            }
        },

        // Template for the li, will be used in a loop.
        createItem  = function(name, value, count)
        {
            var uID             = 'checkbox_select_' + select_name + "_" + name.replace(" ", "_"),
                $_li            = $("<li />"),
                $_checkbox      = $("<input />").attr(
                                        {
                                            'name'  : name,
                                            'id'    : uID,
                                            'type'  : "checkbox",
                                            'value' : value
                                        }
                                    )
                                    .click(

                                        function()
                                        {
                                            updateCurrentlySelected();
                                        }
                                    ),

                $_label         = $("<label />").attr('for', uID),
                $_name_span     = $("<span />").text(name).prependTo($_label),
                $_count_span    = $("<span />").text(count).appendTo($_label);
                        
            return $_li.append( $_checkbox.after( $_label ) );
        },
		
		apply = function()
		{
			$_dropdown_div.toggleClass("show");
			$_parent_div.toggleClass("expanded");
				
			if(!$_parent_div.hasClass("expanded"))
			{  
				// Only do the Apply event if its different
				if(currently_selected != $_submit.data("selected"))
				{
					$_submit.data("selected" , currently_selected);

					that.onApply(
						{ 
							selected : $_submit.data("selected")
						}
					);
				}		
			}					
		};
    
    // Event of this instance
    that.onApply = typeof params.onApply == "function" ? 
                
                    params.onApply :
                
                    function(e) 
                    {
                        //e.selected is accessible
                    };

    that.update = function() 
    {
        $_ul.empty();
        $_native_select.find("option").each(

            function(i)
            {
                $_ul.append( createItem( $(this).text(), $(this).val(), $(this).data("count") ) );
            }
        );

        updateCurrentlySelected();
    }

    that.check = function(checkbox_name, checked) 
    {
        //$_ul.find("input[type=checkbox][name=" + trim(checkbox_name) + "]").attr('checked', checked ? checked : false);

		$_ul.find("input[type=checkbox]").each(function()
		{
			// If this elements name is equal to the one sent in the function
			if($(this).attr('name') == checkbox_name)
			{
				// Apply the checked state to this checkbox
				$(this).attr('checked', checked ? checked : false);
				
				// Break out of each loop
				return false;
			}
		});
		
        updateCurrentlySelected();

    }

    // Build mark up before pushing into page
    $_dropdown_div  .prepend($_search);
    $_dropdown_div  .append($_ul);
    $_dropdown_div  .append($_not_found);
    $_dropdown_div  .append($_submit);
    $_dropdown_div  .appendTo($_parent_div);
    $_select_anchor .prependTo($_parent_div);

    // Iterate through option elements
    that.update();

    // Events 

    // Actual dropdown action
    $_select_anchor.click( 

        function()
        {
            apply();
        }
    );
             
    // Filters the checkboxes by search on keyup
    $_search.keyup(

        function()
        {
            var search = $(this).val().toLowerCase().trim();

            if( search.length == 1 )
            {
                $_ul.find("label").each(

                    function()
                    {
                        if($(this).text().toLowerCase().charAt(0) == search.charAt(0))
                        {
                            if($(this).parent().hasClass("hide"))
                                $(this).parent().removeClass("hide");

                            
                        }
                        else
                        {
                            if(!$(this).parent().hasClass("hide"))
                                $(this).parent().addClass("hide");

                            
                        }
                    }
                );
            }
            else
            {
                // If it doesn't contain 
                if($_ul.text().toLowerCase().indexOf(search) == -1)
                {
                    if($_not_found.hasClass("hide"))
                        $_not_found.removeClass("hide");
                }
                else
                {
                    if(!$_not_found.hasClass("hide"))
                        $_not_found.addClass("hide");
                }
                    
                $_ul.find("label").each(

                    function()
                    {
                        if($(this).text().toLowerCase().indexOf(search) > -1)
                        {
                            if($(this).parent().hasClass("hide"))
                                $(this).parent().removeClass("hide");
                        }
                        else
                        {
                            if(!$(this).parent().hasClass("hide"))
                                $(this).parent().addClass("hide");
                        }
                    }
                );
            }
        }
    );

    $_submit.click(
                
        function(e)
        {
            e.preventDefault();

            apply();
        }
    );

    // Delete the original form submit
    $(params.selector).find('input[type=submit]').remove();

    // Put finalized markup into page.
    $_native_select.after($_parent_div);

    // Hide the original element
    $_native_select.hide();
};

1 réponse

Réponse 1 / 1
flxOri Messages postés 2 Date d'inscription jeudi 29 décembre 2022 Statut Membre Dernière intervention 29 décembre 2022
29 déc. 2022 à 17:51

Ligne 14 du premier bout de code : il faut enlever "<?php echo $constructeur_selected; ?>".
0

Discussions similaires

Moteur de recherche PHP - MySQL
djsquinje -
djsquinje -

1 réponse
Gestion adhérent salle de sport
cs_mijem -
XDarwin -

1 réponse
programme gestion d'intervention
hanane7575 -
imanes02 -

5 réponses
Gestion de parc informatique
Miarishou -
Miarishou -

4 réponses
Gestion Parc Automobile
aniss1985 -
ucfoutu -

6 réponses
Rejoignez-nous