如何在 SAPUI5 输入字段中添加浏览器缓存自动完成功能？答案

【问题标题】：How to add browser cache autocomplete in SAPUI5 Input field?如何在 SAPUI5 输入字段中添加浏览器缓存自动完成功能？
【发布时间】：2017-03-14 05:54:04
【问题描述】：

如何在 SAPUI5 输入字段中添加浏览器缓存自动完成？

我有一个带有输入字段的 SAPUI5 表单。我希望这些输入字段能够像任何其他网站一样显示浏览器历史记录中的自动完成功能。有什么想法吗？

【问题讨论】：

标签： sapui5 sap-fiori

【解决方案1】：

您的问题有点含糊，但我猜您想启用浏览器级别的表单字段自动完成功能。类似这个问题：Make text input fields remember previously entered data。

主要问题是浏览器会在这些条件下保存有关字段值的信息：

输入字段有名称（您可以通过 UI5 sap.m.Input 控件的“名称”属性设置输入字段的名称）。
包含表单已提交。

一般情况下，您不会在 UI5 中提交表单，因为这是一种非 AJAX 传递数据的方式。你可以看看这个问题：Trigger autocomplete without submitting a form 来解决这个问题。

或者，您可以自己将值存储在例如localStorage 并使用它们来填充 sap.m.Input 的建议项聚合。

【讨论】：

【解决方案2】：

我建议使用 window.history 来访问浏览器的历史记录。但是，出于安全原因，window.history 不允许查看各种 URL。

History API 有很好的文档记录，这里有示例：https://developer.mozilla.org/en-US/docs/Web/API/History_API

但是，如果您可以将希望为其打开建议的 URL 存储在模型中，则可以避免使用 window.history 并简单地使用输入字段的建议功能。此处提供了一个示例： https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputSuggestionsCustomFilter/preview

【讨论】：

【解决方案3】：

LocalCacheSettings: function(){

            var aSelectedTokens = this.getView().byId("processOrderNo").getTokens();
            var aModelData = [];
            for(var i = 0; i < aSelectedTokens.length ; i++){
                aModelData.push({
                    "key" : i.toString(),
                    "value" : aSelectedTokens[i].getText()
                });
        jQuery.sap.storage(jQuery.sap.storage.Type.local).put("myLocalData", aModelData);


        }
            this.aProcessOrderTyped = [];
            var oLocalCacheModel = new sap.ui.model.json.JSONModel();
            jQuery.sap.require("jquery.sap.storage");
            var oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.local);
            //this.aProcessOrderTyped;
            if(oStorage.get("myLocalData")){
                this.aProcessOrderTyped = oStorage.get("myLocalData");
                oLocalCacheModel.setData(this.aProcessOrderTyped);
            }
            this.getView().setModel(oLocalCacheModel, "POModel");

【讨论】：