11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Sur mon site j'ai mis en place un input avec un autocomplete qui va chercher les données dans une base de données. Jusque là du classique de chez classique et ça marche.

Maintenant j'ai juste un soucis sur l'affichage. J'ai voulu personnaliser les valeurs affichées avec _renderItem, ce qui marche, mais du coups il m'ajoute les données à tout les ul de la page (menu, liste à gauche...). Comment faire pour le contraindre à un ul en particulier ?

Je débute tout juste avec Jquery, soyez cool Smiley cligne

$(function() {
  $("#client_search").autocomplete({
    minLength: 3,
    source: function(request, response) {
      $.ajax({
        url: "plugins/portail/include/portailJquery.php",
        dataType: "json",
				data: {
					term: request.term,
					a: 'searchclient',
					j: '1',
					rep: '{$_SESSION['portail']['rep0']}',
					maxRows: '5'
				},
        success: function(data) {
          response(data);
        },
        error: function() {
          console.log('no data');
        }
      });
    },
		focus: function(event, ui) {
			$("#client_search").val(ui.item.bpcnum + "  " + ui.item.bpadd + " " + ui.item.bpdnam);
			return false;
		},
		select: function(event, ui) {
      $("#client_search").val(ui.item.bpcnum + "  " + ui.item.bpadd + " " + ui.item.bpdnam);
			$("#client_search-id").val(ui.item.bpid);
			//$("#formrecherche").submit();

			return false;
		}
  })
  .data("ui-autocomplete")._renderItem = function(ul, item) {
    ul.addClass("searchClient");
    return $("<li>")
      .data("ui-autocomplete-item", item)
      .append("<a>" + item.bpid + "  " + item.bpcnum + " " + item.bpadd + " " + item.bpdnam + "</a>")
      .appendTo("ul");
  };
});
Modérateur
Bonjour,

Si tu as la possibilité de donné un id aux ul, tu peux ensuite cibler un ul en particulier en rajoutant un # devant l'id dans les fonctions jQuery.

Exemple (si le ul a pour id "mon_bel_ul") :
...data("#mon_bel_ul")._renderItem...

Amicalement,
Bonjour, merci pour ta proposition mais le soucis est que l'ul est "créé" par _renderItem et n'existe pas dans le code html initial. Du coups je vois pas trop comment lui attribuer un id.

Je rappel que je suis grand débutant en jquery avec quelques vieilles notions de javascript Smiley cligne
Modérateur
Bonjour,

C'est bien devinette, tout ça, même si en y passant du temps, on pourrait essayer de comprendre ce que tu veux.

Cet ul en particulier, il a quoi qui le distingue des autres ul ?

EDIT: d'une manière générale, jQuery utilise des sélecteurs comme le fait css. Pour cibler un élément en particulier, il faut utiliser un sélecteur comme si tu essayais de le cibler dans du code css. Par exemple si ton ul de classe "tata" suit immédiatement un élément ayant lui un id "toto", on peut le cibler par $("#toto + ul.tata").

Amicalement,
Modifié par parsimonhi (22 Jan 2019 - 10:30)
Voici une version épuré du code html généré. Sur cette page il y a 3 ul, un pour le menu du haut (ligne 26) un autre pour le menu de gauche (ligne105) et enfin celui qui est généré par _renderItem dans le form (ligne 164).

Lorsque je fais je saisie une valeur dans le champ client_search, le résultat s'affiche bien dans le ul généré par _renderItem mais aussi dans les autres ul de page.

Je veux bien ajouter des id aux autres ul mais celui de _renderItem comme il est généré à la volé je vois pas trop comment lui en donner un ?

<!DOCTYPE html>
<html lang="fr">
	<head>
    blabla head
	</head>

<body>
	<div class="container">
		<header class="grid">
			<div class="col sml-10 sml-centered med-10 med-centered lrg-10 lrg-centered">
				<img class="float-center" src="http://-----/themes/----/img/entete_logo.jpg" title="">
			</div>

				<section class="grid">
					<div class="col sml-hide med-10 med-show med-centered lrg-10 lrg-show lrg-centered">
            slide d'image
					</div>
				</section>

		</header>

			<nav class="grid">
				<div class="col sml-11 sml-centered sml-show med-hide lrg-hide responsive-menu">
					<label for="menu">Afficher le menu</label>
					<input id="menu" type="checkbox">
					<ul class="menu vertical">
					  <li class="noactive"><a href="http://----/" title="Accueil">Accueil</a></li>
            <li id="cat-1" class="noactive"><a href="http://----/index.php?categorie1/la-societe" title="La société">La société</a></li>
            <li id="cat-2" class="noactive"><a href="http://----/index.php?categorie2/le-savoir-faire" title="Le savoir faire">Le savoir faire</a></li>
            <li id="cat-3" class="noactive"><a href="http://----/index.php?categorie3/les-produits" title="Les produits">Les produits</a></li>*
            <li id="cat-4" class="noactive"><a href="http://----/index.php?categorie4/les-hommes" title="Les hommes">Les hommes</a></li>
            <li id="cat-16" class="noactive"><a href="http://----/index.php?categorie16/telechargements" title="Téléchargements">Téléchargements</a></li>
            <li class="noactive"><a href="http://----/index.php?static16/contacts" title="Contacts">Contacts</a></li>
            <li class="noactive last-item"><a href="http://----/index.php?static15/videos" title="Vidéos">Vidéos</a></li>
          </ul>
				</div>
			</nav>
			<nav class="grid nav">
				<div class="col sml-10 sml-hide sml-centered med-10 med-show med-centered lrg-10 lrg-show lrg-centered">
					<ul class="menu expanded">
					<li class="noactive"><a href="http://----/" title="Accueil">Accueil</a></li>
          <li id="cat-1" class="noactive"><a href="http://----/index.php?categorie1/la-societe" title="La société">La société</a>
            <ul>
              <li id="7" class="text-left noactive"><a href="http://----/index.php?article7/presentation" title="Présentation">Présentation</a></li>
              <li id="8" class="text-left noactive"><a href="http://----/index.php?article8/organisation" title="Organisation">Organisation</a></li>
              <li id="13" class="text-left noactive"><a href="http://----/index.php?article13/histoire" title="Histoire">Histoire</a></li>
              <li id="14" class="text-left noactive"><a href="http://----/index.php?article14/revue-de-presse" title="Revue de presse">Revue de presse</a></li>
            </ul>
          </li>
          <li id="cat-2" class="noactive"><a href="http://----/index.php?categorie2/le-savoir-faire" title="Le savoir faire">Le savoir faire</a>
            <ul>
              <li id="9" class="text-left noactive"><a href="http://----/index.php?article9/une-connaissance-du-marche" title="Connaissance du marché">Connaissance du marché</a></li>
              <li id="15" class="text-left noactive"><a href="http://----/index.php?article15/partenariat-fournisseurs" title="Partenariat fournisseurs">Partenariat fournisseurs</a></li>
              <li id="16" class="text-left noactive"><a href="http://----/index.php?article16/structure-marketing" title="Structure marketing">Structure marketing</a></li>
              <li id="17" class="text-left noactive"><a href="http://----/index.php?article17/logistique" title="Logistique">Logistique</a></li>
            </ul>
          </li>
          <li id="cat-3" class="noactive"><a href="http://----/index.php?categorie3/les-produits" title="Les produits">Les produits</a>
            <ul>
              <li id="18" class="text-left noactive"><a href="http://----/index.php?article18/le-catalogue" title="Le catalogue">Le catalogue</a></li>
              <li id="19" class="text-left noactive"><a href="http://----/index.php?article19/documentations" title="Documentations">Documentations</a></li>
              <li id="20" class="text-left noactive"><a href="http://----/index.php?article20/fournisseurs-partenaires" title="Fournisseurs partenaires">Fournisseurs partenaires</a></li>
              <li id="21" class="text-left noactive"><a href="http://----/index.php?article21/distributeurs-portable-winch" title="Distributeurs">Distributeurs</a></li>
            </ul>
          </li>
          <li id="cat-4" class="noactive"><a href="http://----/index.php?categorie4/les-hommes" title="Les hommes">Les hommes</a>
            <ul>
              <li id="22" class="text-left noactive"><a href="http://----/index.php?article22/lesprit" title="">L’esprit</a></li>
              <li id="12" class="text-left noactive"><a href="http://----/index.php?static12/recrutement" title="Recrutement">Recrutement</a></li>
            </ul>
          </li>
          <li id="cat-16" class="noactive"><a href="http://----/index.php?categorie16/telechargements" title="Téléchargements">Téléchargements</a>
            <ul>
              <li id="63" class="text-left noactive"><a href="http://----/index.php?article63/procedure-sav" title="Procédure SAV">Procédure SAV</a></li>
            </ul>
          </li>
          <li class="noactive"><a href="http://----/index.php?static16/contacts" title="Contacts">Contacts</a>
            <ul>
              <li id="13" class="text-left noactive"><a href="http://----/index.php?static13/utilisateurs" title="Utilisateurs">Utilisateurs</a></li>
              <li id="14" class="text-left noactive"><a href="http://----/index.php?static14/revendeurs" title="Revendeurs">Revendeurs</a></li>
            </ul>
          </li>
          <li class="noactive"><a href="http://----/index.php?static15/videos" title="Vidéos">Vidéos</a>
            <ul>
              <li class="text-left noactive"><a href="http://----/index.php?tag/aaa" >aaaa</a></li>
              <li class="text-left noactive"><a href="http://----/index.php?tag/bbb" >bbb</a></li>
              <li class="text-left noactive"><a href="http://----/index.php?tag/ccc" >ccc</a></li>
              <li class="text-left noactive"><a href="http://----/index.php?tag/ddd" >ddd</a></li>
              <li class="text-left noactive"><a href="http://----/index.php?tag/eee" >eee</a></li>
            </ul>
          </li>
        </ul>
				</div>
			</nav>

			<section class="grid">
				<div class="col sml-10 sml-centered med-10 med-centered lrg-10 lrg-centered block-grey">
					<div class="grid">

            <section class="col sml-12 med-3 lrg-3 sidebar pam">
								<header>
									<h2 class="h5 text-center text-uppercase"><b>Actualités</b></h2>
								</header>

							<ul class="bxslider">
  							<li></li>
                <li></li>
              </ul>
						</div>
					</section>

						<article class="col sml-12 med-9 lrg-9 content">
							<div class="grid">
								<div class="col sml-12 med-12 lrg-12 centered">
									<section>
									<script>
                    $(function() {
                      $("#client_search").autocomplete({
                        minLength: 3,
                        source: function(request, response) {
                          $.ajax({
                            url: "plugins/portail/include/portailJquery.php",
                            dataType: "json",
                    				data: {
                    					term: request.term,
                    					a: 'searchclient',
                    					j: '1',
                    					rep: '007',
                    					maxRows: '10'
                    				},
                            success: function(data) {
                              response(data);
                            },
                            error: function() {
                              console.log('no data');
                            }
                          });
                        },
                    		focus: function(event, ui) {
                    			$("#client_search").val(ui.item.bpcnum + " " + ui.item.bpaadd + " " + ui.item.bpdnam);
                    			return false;
                    		},
                    		select: function(event, ui) {
                          $("#client_search").val(ui.item.bpcnum + " " + ui.item.bpaadd + " " + ui.item.bpdnam);
                    			$("#client_search-id").val(ui.item.bpid);
                    			//$("#client_search-form").submit();

                    			return false;
                    		}
                      })
                      .data("ui-autocomplete")._renderItem = function(ul, item) {
                        ul.addClass("searchClient");
                        return $("<li>")
                          .data("ui-autocomplete-item", item)
                          .append("<div>" + item.bpcnum + " " + item.bpaadd + " " + item.bpdnam + "</div>")
                          .appendTo("ul");
                      };
                    });
                    </script>
                  <div class="grid">
                    <div class="col sml-12 med-12 lrg-12"><h1 class="h4" id="formrecherche"><b>Rechercher un client</b></h1></div>
                  </div>
                  <div class="grid">
                    <form method="post" action="http://-----/index.php?static18/portail&p=crm&a=client&v=name#formrecherche" id="client_search-form">
                      <fieldset>
                        <div class="col sml-12 med-5 lrg-5"><input type="text" size="30" name="key" id="client_search" value="" placeholder="Par nom" pattern=".{3,}" title="3 caractères minimum" autocomplete="off"></div>
                        <div class="col sml-12 med-5 lrg-5"><input type="submit" name="submit" id="submit" value="Rechercher"></div><input type="hidden" id="client_search-id" name="client_search-id" value="">
                      </fieldset>
                    </form>
                  </div>
                </section>
								</div>
							</div>
						</article>
					</div>
				</div>
			</section>

		<footer class="grid">
			blabla de pied de page
		</footer>
	</div>
</body>
</html>
Modérateur
Bonjour,

Avec un exemple complet, tout de suite, c'est plus facile.

Il semble que le bout de ligne de code qui pose problème est :
.appendTo("ul");

Ce code dit d'ajouter des li à tous les ul de la page (le "ul" indique n'importe quelle balise ul).

Or, tu ne veux ajouter ces lignes qu'au ul que tu viens de créer, qui est justement le paramètre ul de la fonction dans lequel est ce bout de ligne. Pour que tout rentre dans l'ordre, il suffit donc d'écrire :
.appendTo(ul);


C'est à confirmer sur le code complet évidemment.

Amicalement,
Parfait pil poil Smiley smile

C'était bien appendTo(ul) et non appendTo("ul") qu'il fallait utilisé.

Merci pour ton aide Smiley smile
Meilleure solution