MUI中使用JS实现后台数据传递到前端，并使用动态的查找搜索功能

最新推荐文章于 2021-08-05 23:43:12 发布

LH专属荷包

最新推荐文章于 2021-08-05 23:43:12 发布

阅读量1.2k

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_42067668/article/details/100323529

版权

javaweb 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">获取数据</h1>
		</header>
		<div class="mui-content">
			<div class="mui-input-row mui-search">
			    <input type="search" id="searchname" class="mui-input-clear" placeholder="搜索姓名">
			</div>
			
			<ul id="vsul"></ul>
			
		    <button type="button" id="getdata" class="mui-btn mui-btn-blue">获取数据</button>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<script type="text/javascript">
			mui.init()
			
			
			mui.plusReady(function(){
				mui.ajax('http://192.168.1.242:8082/usermanager/getAllUserName', {
					dataType: 'text', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var dataString =  JSON.stringify(data);
						var str = url=dataString.substr(2,dataString.length-4);
						plus.storage.setItem("name",str);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						mui.toast("请求状态码" + XMLHttpRequest.status + "请求属性值" + XMLHttpRequest.readyState + textStatus);
					}
				});
				
				  $("#searchname").keyup(function() {
				  	
				  	var stringname = plus.storage.getItem("name");
				  	var arr = stringname.split(",");
				  	
			    	$("#vsul li").remove();
			      	var vl = $("#searchname").val();
			        if(vl==""){
			            return false;
			        }
			        $(arr).each(function(index){
			            if(this.indexOf(vl)>=0){
			                $("#vsul").append("<li class='mui-table-view-cell'>"+this+"</li>");
			            }
			        });
				  });
				  
				  mui("#vsul").on("tap",".mui-table-view-cell",function(){
				  	var nametext = this.innerHTML;
				  	$("#searchname").val(nametext);
				  	$("#vsul li").remove();
				  })
				  
				  //然后实现点击后出现在框中
				 
			})
		</script>
	</body>

</html>