提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

一个最简单的用SAP UI5实现的live search demo，完整代码只有55行

SAP代码 实现 一个 简单 完整 Demo UI5
2023-09-14 09:02:39 时间

完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>SAPUI5 Sandbox</title>
	<script
		id="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);
});

测试结果：

在这里插入图片描述

相关文章