引导模态中的自动完成

Question

I want to show the last input data filled by user in bootstrap modal, I tried using HTML autocomplete="on" attribute but failed, like done in this fiddle.

Once user click on submit, on the second time it shows the hints according to previous filled input values.

http://bootsnipp.com/snippets/featured/login-form-in-a-modal

http://jsfiddle.net/KyleMit/0fscmf3L/

Now I'm using jQuery autocomplete method but in that we have to pass an array as source. See following example

https://jqueryui.com/autocomplete/

Suppose I save the text input using ng-model or something and save data in $rootScope or scope and then I refresh the browser, then scope will get vanish.

Answer 1

Suppose i save the text input using ng-model or something and save data in $rootScope or scope and then i refresh the browser, then scope will get vanish.

As you have said yourself, the values will not persist throughout your application because you will need to store values either in a database or in session variable for example.

Once you have done this you can then pass the array to your js code like below.

$(function () {
    var availableTags = GetTags(); // GetTags() would be the method that gets your saved inputs.
    $("#tags").autocomplete({
        source: availableTags
    });
});

Answer 2

Code Updated I suppose that you are using the second approach, ie using angular js: We could store the user input to the browser cookie and read from it. Below is documentation for using angular cookie: ( https://docs.angularjs.org/api/ngCookies/service/ $cookies)

Below is the updated code:

var myapp = angular.module('myApp', ['ngCookies']);
var PageController = function($scope, $cookieStore) {
$scope.cookieList = $cookieStore.get('textName') || [];
$scope.storeDataToCookie = "";
$scope.totalCookie = 0;
$scope.getCookieList = function() {
    var arr = [];
    arr = $cookieStore.get("textName");
    $scope.cookieList = arr;
    $scope.totalCookie = $cookieStore.get("textName").length;
};
$scope.storeCookieData = function() {
    var array = $cookieStore.get('textName');
    if (array == null) {
        array = [];
    }
    array.push($scope.storeDataToCookie);
    $cookieStore.put('textName', array);
    $scope.cookieList = array;
    $scope.totalCookie = $cookieStore.get("textName").length;
};
$scope.deleteCookieData = function() {
    $cookieStore.remove('textName');
    $scope.cookieList = $cookieStore.get('textName') || [];
    $scope.totalCookie = 0;
};
$scope.retrieveCookieData = function() {
    //
    $scope.totalCookie = $cookieStore.get("textName").length;
};
}
myapp.controller('CookieTestController', PageController);

Html:

<div ng-app="myApp">
    <div data-ng-controller="CookieTestController">
        <input type="text" ng-model="storeDataToCookie" />
        <input type="button" ng-click="storeCookieData()" value="Save Cookie Data" />
        <input type="button" ng-click="retrieveCookieData()" value="Retrieve Cookie Data" />
        <input type="button" ng-click="deleteCookieData()" value="Delete Cookie Data" />
        <input type="button" ng-click="getCookieList()" value="List Cookies" />
        <br />
        <span>Total Cookies:<strong>{{totalCookie}}</strong></span>
        <p>List of cookie values:</p>
        <ul>
            <li ng-repeat="c in cookieList">
                {{c}}
            </li>
        </ul>
    </div>
</div>

Below is the Plunker: Plunker