一个最简单的用SAP UI5实现的live search demo，完整代码只有55行
生活随笔
收集整理的這篇文章主要介紹了
一个最简单的用SAP UI5实现的live search demo，完整代码只有55行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
完整代碼：
<!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8"><title>SAPUI5 Sandbox</title><scriptid="sap-ui-bootstrap"src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"data-sap-ui-theme="sap_belize"data-sap-ui-libs="sap.m,sap.ui.layout"data-sap-ui-compatVersion="edge"data-sap-ui-preload="async"></script><script>sap.ui.getCore().attachInit(function () {var oInput = new sap.m.Input({liveChange : function(oEvent) {var changedValue = oEvent.getParameter('newValue');console.log('live change event: ' + changedValue);jQuery.ajax({url:"http://localhost:3000/echo?data=" + changedValue,dataType: 'text',async:true, success:(oResponse) => { oResult.setText(oResponse);}});}});var oVerticalLayout = new sap.ui.layout.VerticalLayout();oVerticalLayout.addContent(oInput);var oHorizontalLayout = new sap.ui.layout.HorizontalLayout();var oLabel = new sap.m.Label({text: 'Response:',labelFor: 'result',design: 'Bold'});var oResult = new sap.m.Text('result');oHorizontalLayout.addContent(oLabel);oHorizontalLayout.addContent(oResult);oVerticalLayout.addContent(oHorizontalLayout);oVerticalLayout.placeAt("content");});</script> </head> <body class="sapUiBody" role="application"><div id="content"></div> </body> </html>nodejs實現：
app.get('/echo', function(req, res){var arg = url.parse(req.url).query;var params = qs.parse(arg);setTimeout(() => res.send(params.data),1000); });測試結果：
總結
以上是生活随笔為你收集整理的一个最简单的用SAP UI5实现的live search demo，完整代码只有55行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于module require的学习
- 下一篇： 把SAP Cloud for Custo