引导模式中的自动完成答案

【问题标题】：autocomplete in bootstrap modal引导模式中的自动完成
【发布时间】：2015-05-12 16:02:50
【问题描述】：

我想在引导模式中显示用户填写的最后一个输入数据，我尝试使用 HTML autocomplete="on" 属性但失败了，就像在这个小提琴中所做的那样。

一旦用户点击提交，第二次它会根据之前填写的输入值显示提示。

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

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

现在我正在使用 jQuery 自动完成方法，但我们必须将数组作为源传递。看下面的例子

https://jqueryui.com/autocomplete/

假设我使用 ng-model 或其他东西保存文本输入并将数据保存在 $rootScope 或范围中，然后我刷新浏览器，那么范围将消失。

【问题讨论】：

标签： javascript jquery angularjs jquery-ui autocomplete

【解决方案1】：

假设我使用 ng-model 或其他东西保存文本输入并将数据保存在 $rootScope 或范围中，然后我刷新浏览器，那么范围将消失。

正如您自己所说，这些值不会在整个应用程序中持续存在，因为您需要将值存储在数据库或会话变量中。

完成此操作后，您可以将数组传递给您的 js 代码，如下所示。

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

【讨论】：

【解决方案2】：

代码更新 我想您正在使用第二种方法，即使用 angular js：我们可以将用户输入存储到浏览器 cookie 中并从中读取。以下是使用 Angular cookie 的文档： (https://docs.angularjs.org/api/ngCookies/service/$cookies)

以下是更新后的代码：

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>

下面是 Plunker： Plunker

【讨论】：

能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？
在文本字段中输入并失去焦点后，按下“存储的 Cookie 数据”按钮后，控制台中未显示任何数据。