HTML-Eingabe Autovervollständigen

Question

Ich habe eine Seite mit einigen Eingabefeldern. Die Daten von dieser Seite werden ohne Verwendung des Formulars an den Server gesendet. Ich habe ein JavaScript, das die Daten sammelt, erstellt ein JSON und sendet es an den Server mit Ajax-Aufruf.

Das Problem in diesem Fall ist, dass der Browser die Daten nicht speichert, um die automatische Vervollständigung für das nächste Mal anbieten, wenn der Benutzer das gleiche Formular füllt.

Ist eine Möglichkeit, dies zu vermeiden? Ich brauche eine Möglichkeit, Autocomplete anzubieten! Irgendein Trick?

Answer 1

Ich habe Autovervollständigung gefunden, um zu arbeiten, wenn ein tatsächliches Formular beigefügt ist und sein Sendeereignis tatsächlich ausgelöst wurde (selbst wenn die Daten von AJAX gesendet wurden). Ich würde vorschlagen, ein Formular mit einem Absenden-Button zu verwenden, und die Einreichung über Javascript abzufangen (an das Ereignis onsubmit des Formulars anzuhängen), um es zu verhindern und es durch AJAX zu tun.

Die Verwendung eines korrekten HTML-Formulars und das Verhindern des Sendens, anstatt nur ein Eingabefeld zu verwenden, hat auch den Vorteil, den Handler onsubmit zu aktivieren, wenn der Benutzer die Eingabetaste drückt. Ich finde das als Benutzer ziemlich nützlich.

Answer 2

Haben Sie die in Trigger autocomplete without submitting a form beschriebene Methode ausprobiert? Das hat für mich funktioniert.

Grundsätzlich einen Klick auf die Schaltfläche zum Senden eines Formulars auslösen und das Formular zum Öffnen einer leeren Seite in einem ausgeblendeten iframe erhalten. Es ist offensichtlich ein Hack, aber es klickt buchstäblich das Formular Taste, sendet das Formular und öffnet eine neue Seite so natürlich funktioniert es in jedem Browser ich eincheckte habe

das Beispiel Markup zu zitieren hier:.

<iframe id="remember" name="remember" class="hidden" src="/content/blank">  
</iframe> 

<form target="remember" method="post" action="/content/blank"> 

    <fieldset> 
    <label for="username">Username</label> 
    <input type="text" name="username" id="username" value=""> 
    <label for="password">Password</label> 
    <input type="password" name="password" id="password" value=""> 
    </fieldset> 

    <button id="submit-button" type="submit" class="hidden"></button> 

</form> 

Dann lösen Sie die Übermittlung mit $("#submit-button").click() bei der Verarbeitung des Formulars durch Ajax.

Answer 3

Ich benutze HTML5 Browser-Speicher für diese Art von Dingen. Es gibt eine ziemlich gute Einführung dazu here Dies ermöglicht Datenpersistenz auf der Client-Seite für die meisten modernen Browsern. Sie können damit Formulardaten erfassen und beliebig oft neu rendern.

Answer 4

Sie können dies versuchen: Auto-Vervollständigen mit jQuery

function DefaultCtrl($scope) { 
 
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"]; 
 
} 
 

 
angular.module('MyModule', []).directive('autoComplete', function($timeout) { 
 
    return function(scope, iElement, iAttrs) { 
 
      iElement.autocomplete({ 
 
       source: scope[iAttrs.uiItems], 
 
       select: function() { 
 
        $timeout(function() { 
 
         iElement.trigger('input'); 
 
        }, 0); 
 
       } 
 
      }); 
 
    }; 
 
});

<div ng-app='MyModule'> 
 
    <div ng-controller='DefaultCtrl'> 
 
     <input auto-complete ui-items="names" ng-model="selected"> 
 
     selected = {{selected}} 
 
    </div> 
 
</div>

http://jsfiddle.net/sebmade/swfjT/

Hope Diese helfen Ihnen!