jQuery UI Autocomplete avec autofill Chrome-like

Question

J'utilise la fonctionnalité de saisie semi-automatique jQuery UI et, alors que je l'ai trouvé un moyen de mettre en œuvre la fonction autoFill, je cherchais la fonctionnalité comme dans la barre d'adresse Google Chrome. Lorsque le meilleur élément correspondant est rempli automatiquement, mais il n'interrompt pas votre frappe.

Toute aide est appréciée.

Answer 1

Je vous suggère de regarder le plugin plus jQuery autocomplete, qui offre cette option intégrée dans la syntaxe est similaire, mais au lieu d'avoir la source comme une option au lieu initialisé comme le premier paramètre, avec cette syntaxe:.

$('input.autocomplete').autocomplete(data, {autoFill: true});

Le data doit être soit un tableau de résultats, ou une URL qui pointe vers un script côté serveur qui le génère. Pour plus d'informations consultez la documentation: http://docs.jquery.com/Plugins/Autocomplete

---

Prenez note cependant que l'auteur de ce plugin considèrent obsolète, et la saisie semi-automatique jQuery UI pour être son successeur. Dans un « Comment migrer » poste qu'il dirige les utilisateurs maintenant, le rationnel jQuery UI ne pas avoir l'option autofill est expliqué:

  

autoFill: Autant en emporte pas immédiatement   remplacement disponible, pour une bonne   raisons: Le comportement par défaut lorsque   à sélectionner des éléments via le clavier met maintenant   la valeur focalisée à l'entrée,   comme le Firefox AwesomeBar fait.   Ce n'est pas la même chose que ce que le autoFill   l'option a fait, mais il ne devrait pas être   besoin de recréer cet effet.

Answer 2

$('#FELD').autocomplete( 
      source: "ajax/manager.json.php",
      minLength: 0, 
      change: function(event, ui) {
          found = false;
            $(".ui-autocomplete li").each(function(n, element){
              var retval = $(element).text().toUpperCase();
              var retval2 = $($(this).data()).attr('item.autocomplete');
              if ((found == false ) &&(retval == $("#FELD").val().toUpperCase()) )
              {
                $("#FELD").val(retval);
                $("#FELDID").val(retval2.id);
                found = true;
              }
            });
          if ( found == false) { $("#FELDID").val("-1"); }
      }
  }); `enter code here`