Nhập HTML tự động hoàn thành

Question

Tôi có một trang với một số trường nhập. Dữ liệu từ trang này được gửi đến máy chủ mà không cần gửi biểu mẫu. Tôi có một JavaScript thu thập dữ liệu, tạo ra một JSON và gửi nó đến máy chủ bằng cách sử dụng cuộc gọi Ajax.

Vấn đề trong trường hợp này là trình duyệt không lưu dữ liệu để cung cấp tự động hoàn thành cho lần tiếp theo khi người dùng điền vào cùng một biểu mẫu.

Có cách nào để tránh điều này không? Tôi cần một cách để cung cấp tính năng tự động hoàn tất! Bất kỳ thủ thuật nào?

Answer 1

Tôi đã tìm thấy tự động hoàn thành để hoạt động khi có một biểu mẫu thực sự được đính kèm và sự kiện gửi của nó thực sự được kích hoạt (ngay cả khi dữ liệu được gửi bởi AJAX). Tôi sẽ đề nghị sử dụng một hình thức với một nút gửi, và ngăn chặn các trình thông qua Javascript (gắn vào sự kiện của onsubmit của mẫu) để ngăn chặn nó và làm điều đó bằng AJAX.

Sử dụng biểu mẫu HTML thích hợp và ngăn gửi, thay vì chỉ sử dụng trường nhập, cũng có lợi ích khi kích hoạt trình xử lý onsubmit khi người dùng nhấn enter. Tôi thấy rằng khá hữu ích như một người sử dụng.

Answer 2

Bạn đã thử phương pháp được nêu trong Trigger autocomplete without submitting a form. Điều này làm việc cho tôi.

Về cơ bản, kích hoạt một lần nhấp vào nút gửi biểu mẫu và nhận biểu mẫu để mở trang trống trong iframe ẩn. Đó rõ ràng là một hack nhưng nó nghĩa là nhấp vào nút hình thức gửi, submit form và mở ra một trang mới để tự nhiên nó hoạt động ở mọi trình duyệt Tôi đã kiểm tra trong

Để báo đánh dấu mẫu ở đây:.

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

Sau đó kích hoạt gửi với $("#submit-button").click() khi xử lý biểu mẫu thông qua ajax.

Answer 3

Tôi sử dụng bộ nhớ trình duyệt html5 cho những thứ này. Có một giới thiệu khá tốt cho nó here Điều này cho phép dữ liệu tồn tại ở phía máy khách đối với hầu hết các trình duyệt hiện đại. Bạn có thể sử dụng điều này để thu thập dữ liệu biểu mẫu và hiển thị lại thường xuyên như bạn muốn.

Answer 4

Bạn có thể thử này: AutoComplete với 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/

Hy vọng điều này giúp bạn!