Bonjour, j'aurais 2 petites questions concernant le fonctionnement de ce jquery : http://jqueryui.com/autocomplete/#combobox

En premier lieu,je voulais savoir s'il est possible (comme demandé dans le sujet), de faire un submit, une fois qu'on a sélectionné une valeur en cliquant dessus et/ou en validant?

Ensuite, savoir comment faire pour que lorsque je clique dans l'input, la ligne soit sélectionnée automatiquement (actuellement, je dois faire un double ou triple clique rapide), afin de pouvoir utiliser la fonctionnalité idéalement et rapidement.

En vous remerciant de l'aide apportée.

Stéphane

Pour ta première question, il suffit d'utiliser l'évènement "select" qui est appelé lorsqu'un élément est sélectionné, et de soumettre ton formulaire à ce moment là en Javascript : http://api.jqueryui.com/autocomplete/#event-select

Pour ta seconde question je n'ai pas compris, à quel endroit es tu obligé de faire un double clique ?

Merci déjà pour ta réponse, je regarde dans la journée.

La deuxième partie du message, je vais essayer d'être plus explicite.

Dans l'input (qui fait office de select), une fois une valeur sélectionnée, elle reste visible dans le select. Normal !!.
Sauf que si je veux changer la valeur du select en utilisant l'autocomplet, il faut d'abord remettre à vide cet input.
Or en cliquant dedans, le curseur se met en fin de valeur. Je suis donc obligé de double cliquer (voir triple cliquer) pour sélectionner la valeur en cours, et pouvoir la remplacer par ma recherche.
C'est pas très pratique.

Merci encore de votre aide.

Stéphane

Okay donc si j'ai bien compris tu voudrais que lorsque tu cliques à nouveau sur un input, ça réinitialise la recherche. Pour cela il suffit de faire ça :

Je te remercie du temps que tu passes à m'aider, toutefois, la fonction jquery étant assez longue, je n'arrive pas à trouver où placer la fonction select, et ton code à l’intérieur. Peux-tu encore m'éclairer ?

Bonjour,

Désolé de relancer le sujet, mais depuis mon dernier message, j'ai essayé des choses, mais rien ne veut. Une aide complémentaire ne serait pas de refus.

Merci encore.

Bonjour,

Ensuite, savoir comment faire pour que lorsque je clique dans l'input, la ligne soit sélectionnée automatiquement (actuellement, je dois faire un double ou triple clique rapide), afin de pouvoir utiliser la fonctionnalité idéalement et rapidement.

Normalement, lorsque tu cliques dans l'input ( dans mon cas ), j'arrive directement dans la zone de texte.
Si tu souhaites exécuter un script lorsque tu cliques sur une des propositions, je te propose d'utiliser "onChange" :

<select id="combobox" onchange="LaFonctionAAppeler()"> <!-- Lorsque le client va cliquer sur une proposition, on appel la fonction  LaFonctionAAppeler()-->
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
  </select>

<script>
LaFonctionAAppeler() {
    /*Le code d'envoi du formulaire*/
}
</script>

Si tu souhaites obtenir plus d'informations, n'hésite pas.

Merci de ton aide, toutefois, j'utilisais bien cela avec une form, un select avec onchange='submit()', etc.. Tout fonctionnait bien.

Mais j'ai trouvé ce script Jquery qui permet dans le select de faire de l'autocomplete et donc, plutot que d'avoir un simple menu déroulant, c'est un Input en Jquery qui gère l'autocomplete.

Sauf que dans ce cas, le onchange='submit()' ne fonctionne pas, et comme je le dis aussi plus haut, je voulais aussi trouver une solution pour que lorsque je clique dans l'input, la valeur de l'input soit remise à 0.

Dans ce sens, Genova a compris ma demande, mais j'ai quelques soucis pour la mettre en place.

Merci en tous les cas de ton aide.

Je pense avoir compris ce que tu cherches à faire.
Essaye ce code et dit moi si c'était bien ce que tu voulais faire.

<script>

  (function( $ ) {

    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            tooltipClass: "ui-state-highlight"
          })
		  .mousedown(function() {
 $(this).val(''); // Pour le vider
   $(this).autocomplete('search', ''); // Pour relancer une recherche sur l'autocomplete automatiquement
          });
 
        this._on( this.input, {
		
          autocompleteselect: function( event, ui ) {

            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .mousedown(function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
			//alert();
          })
          .click(function() {
            input.focus();
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
	  
	  
	  
	  
 
      _removeIfInvalid: function( event, ui ) {
 
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
	  
  
    });
	

  })( jQuery );
 
  $(function() {
    $( "#combobox" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#combobox" ).toggle();
    });
	$( "#combobox" ).click(function() {
    });
  });

  </script>

N'hésite pas à revenir vers moi si tu as des questions sur le code ci-dessus.

Je te remercie !! Pour la partie 'je clique, je vide l'input', c'est impeccable.

Ensuite, sans abuser bien entendu, le principe du "onchange='submit()' ", je vois bien l'utilisation du select( event, ui ) mais j'ai encore du mal à le concrétiser ..

Si tu peux encore m'aider sur ce point là..

En gros tu souhaites que lorsque l'on clique sur une option, une fonction "submit" se lance ?
Puisque je suis en forme, je vais encore te mâcher le travail
Si c'est ça, essaye ce code.

<script>


  (function( $ ) {
  


  
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            tooltipClass: "ui-state-highlight"
          })
		  .mousedown(function() {
			$(this).val(''); // Pour le vider
			$(this).autocomplete('search', ''); // Pour relancer une recherche sur l'autocomplete automatiquement
          });
 
        this._on( this.input, {
		
          autocompleteselect: function( event, ui ) {
			
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
			submit(ui.item);
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .mousedown(function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
			//alert();
          })
          .click(function() {
            input.focus();
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
	  
	  
	  
	  
 
      _removeIfInvalid: function( event, ui ) {

        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
	  
	  
	  
    });
	
	

	
	
  })( jQuery );
 
  $(function() {
    $( "#combobox" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#combobox" ).toggle();
    });
	$( "#combobox" ).click(function() {
    });
  });

function submit (option) {
	alert(option.value);
}
  
  
  </script>

Comme tout à l'heure, si tu ne comprends pas quelque chose, n'hésite pas.

Il m'arrive parfois de ne pas exprimer les choses de la bonne façon, et donc, on arrive pas au résultat souhaité !!
Désolé donc de te resolliciter sur ce point, et je vais essayer d'être plus expressif.

En fait, je souhaiterais que lorsque je sélectionne (en cliquant) une valeur de mon select (qui est un input en autocomplete jquery), la page se recharge comme lorsque j'ai un code du style En methode post, car une fois la page rechargée, je récupère la valeur de l'option pour afficher les informations client en fonction de cette valeur.

En te remerciant encore ..

Désolé du retard, mais ne t'inquiète pas, je pense que j'ai ce que tu veux.
Du coup, j'ai réutilisé le code que je t'avais envoyé juste avant, sauf que dans la fonction javascript "submit", j'ai ajouté un POST ( comme si tu en faisais un avec PHP ) exécuté par Javascipt.
Je te laisse regarder et essayer ce code.

Dans ce code, il y a toutes les bases (récupéré sur le lien que tu avais donné plus tôt). Veille à bien récupérer le script javascript, html ( qui a aussi été modifié ) et surtout n'oublie pas le php à la fin !
Dans le cas ou la redirection va vers une autre page ( car j'ai utilisé index.php ), tu peux changer l'adresse dans la <form> du script html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Combobox</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }
  </style>
<script>


  (function( $ ) {
  


  
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            tooltipClass: "ui-state-highlight"
          })
		  .mousedown(function() {
			$(this).val(''); // Pour le vider
			$(this).autocomplete('search', ''); // Pour relancer une recherche sur l'autocomplete automatiquement
          });
 
        this._on( this.input, {
		
          autocompleteselect: function( event, ui ) {
			
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
			submit(ui.item);
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .mousedown(function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
			//alert();
          })
          .click(function() {
            input.focus();
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
	  
	  
	  
	  
 
      _removeIfInvalid: function( event, ui ) {

        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
	  
	  
	  
    });
	
	

	
	
  })( jQuery );
 
  $(function() {
    $( "#combobox" ).combobox();
    $( "#toggle" ).click(function() {
      $( "#combobox" ).toggle();
    });
	$( "#combobox" ).click(function() {
    });
  });

function submit (option) { // Cette fonction est appelé lorsque l'on clique sur une option
	//alert(option.value);
	document.getElementById('Formulaire').submit()
}
  
  
  </script>
</head>
<body>
 
<form method="post" id="Formulaire" action="index.php">
<div class="ui-widget" >
  <label>Your preferred programming language: </label>
  <select id="combobox" name="select" >
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="Clojure">Clojure</option>
    <option value="COBOL">COBOL</option>
    <option value="ColdFusion">ColdFusion</option>
    <option value="Erlang">Erlang</option>
    <option value="Fortran">Fortran</option>
    <option value="Groovy">Groovy</option>
    <option value="Haskell">Haskell</option>
    <option value="Java">Java</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Lisp">Lisp</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
    <option value="Scala">Scala</option>
    <option value="Scheme">Scheme</option>
  </select>
</div>
<button id="toggle">Show underlying select</button>
</form>

<?php

if (!empty($_POST["select"])) //On regarde si un formulaire a été envoyé
{
	echo "Envoyé ! : ".$_POST["select"]; //Oui un formlulaire existe, on affiche le <select>
}
else
{
    echo "Rien !"; //Aucun formulaire n'a été envoyé
}
?>
 
 
</body>
</html>

Comme je le dis tout le temps, si tu ne comprends pas quelque chose, n'hésite pas ! ( Le but étant de comprendre ce que tu n'as pas réussi à faire ).

J'ai encore de sérieuses lacunes avec Jquery, mais comme tu devais le savoir, tout marche comme je le voulais, donc, je te remercie sincèrement de ton aide ..

Aucun problèmes, je suis là pour ça après tout