61119

How to add browser cache autocomplete in SAPUI5 Input field?

Question:

How to add browser cache autocomplete in SAPUI5 Input field?

I have a SAPUI5 form with input fields. I want these input fields to display autocomplete from browser history like any other website. Any idea?

Answer1:

Your question is a little vague, but I guess that you want to enable browser-level form field autocomplete. Something like in this question: <a href="https://stackoverflow.com/questions/16444496/make-text-input-fields-remember-previously-entered-data" rel="nofollow">Make text input fields remember previously entered data</a>.

The main catch is that the browser saves information regarding to field values under these conditions:

<ul><li>The input fields have names (you can set the name of an input field via the "name" property of the UI5 sap.m.Input control).</li> <li>The containing form is submitted.</li> </ul>

Generally, you don't submit forms in UI5, because this is a non-AJAX way of passing data. You can look at this question: <a href="https://stackoverflow.com/questions/15462991/trigger-autocomplete-without-submitting-a-form" rel="nofollow">Trigger autocomplete without submitting a form</a> for a solution to this problem.

Alternatively, you can store the values by yourself in e.g. the localStorage and use them to fill up the sap.m.Input's suggestionItems aggregation.

Answer2:

I would suggest using the window.history to access the history of your browser. However, window.history does not allow for looking at various URLs for security reasons.

The History API is well documented with examples here : <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/History_API</a>

If however, you can store the URLs that you wish to turn on suggestions for in a model, you can avoid window.history and simple use the suggestion feature of an Input field. A sample of this is provided here: <a href="https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputSuggestionsCustomFilter/preview" rel="nofollow">https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputSuggestionsCustomFilter/preview</a>

Answer3:

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");

Recommend

  • Sql indexes vs full table scan
  • Sum and Average of a series of numbers inputed to a text field
  • Spring MVC redirect with custom http headers
  • mail server requires authentication when attempting to send to a non-local e-mail address when using
  • BizTalk Party not being resolved for incoming HL7v2 message
  • Class implementation in a header file == bad style? [duplicate]
  • 2-table interaction: insert, get result, insert
  • HTML checkbox form and HTTP URL
  • Get all existing pointers to an object
  • The symbol you provided is not a function
  • MySQL multiple IN conditions to subquery with same table
  • How do I check if System::Collections:ArrayList is empty / nullptr / null?
  • Creating a C++ function that calls other Lua function
  • Google OAuth: can't get refresh token with authorization code
  • Access user's phone number on iOS 7
  • How to use function wrapper in mustache.php?
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • How to add a focus style to an editable ComboBox in WPF
  • how to upload multiple files in c# windows application
  • Adjust width of select element according to selected option's width
  • Button click event not firing in jQuery
  • How to handle images sent by a mobile device?
  • Installed module is empty
  • How to write order and limit within cakephp joins array
  • CakePHP 2.0.4 - findBy magic methods with conditions
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JSON response opens as a file, but I can't access it with JavaScript
  • Django rest serializer Breaks when data exists
  • What is the “return” in scheme?
  • req.body is undefined - nodejs
  • Statically linking a C++ library to a C# process using CLI or any other way
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • WPF Applying a trigger on binding failure
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • reshape alternating columns in less time and using less memory
  • Unable to use reactive element in my shiny app