Completamento automatico dell'input HTML

Question

Ho una pagina con alcuni campi di input. I dati di questa pagina vengono inviati al server senza utilizzare il modulo submit. Ho un JavaScript che raccoglie i dati, crea un JSON e lo invia al server usando la chiamata Ajax.

Il problema in questo caso è che il browser non salva i dati per offrire il completamento automatico per la volta successiva in cui l'utente riempie lo stesso modulo.

È un modo per evitarlo? Ho bisogno di un modo per offrire il completamento automatico! Qualche trucco?

Answer 1

Ho trovato che il completamento automatico funziona quando è presente un modulo effettivo e il suo evento di invio è stato effettivamente attivato (anche se i dati sono stati inviati da AJAX). Vorrei suggerire di utilizzare un modulo con un pulsante di invio e intercettare l'invio tramite Javascript (allegando all'evento onsubmit del modulo) per impedirlo e farlo da AJAX.

L'utilizzo di un modulo HTML corretto e la prevenzione di invio, anziché utilizzare solo un campo di input, ha anche il vantaggio di attivare il gestore onsubmit quando l'utente preme Invio. Trovo che sia piuttosto utile come utente.

Answer 2

Hai provato il metodo descritto in Trigger autocomplete without submitting a form. Questo ha funzionato per me.

Fondamentalmente attivare un clic sul pulsante di invio di un modulo e ottenere il modulo per aprire una pagina vuota in un iframe nascosto. E 'ovviamente un hack, ma non scatta letteralmente il pulsante modulo di invio, invia il modulo e si apre una nuova pagina in modo naturale che funziona in tutti i browser che ho controllato

per citare l'esempio di markup qui:.

<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> 

Quindi attivare il submit con $("#submit-button").click() durante l'elaborazione del modulo tramite ajax.

Answer 3

Io uso la memoria del browser html5 per questo tipo di cose. C'è una buona introduzione a questo here Ciò consente la persistenza dei dati sul lato client per i browser più moderni. Puoi usare questo per acquisire i dati del modulo e ri-renderlo tutte le volte che vuoi.

Answer 4

Si può provare questo: completamento automatico con 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/

Spero che questo aiuto!