<!doctype html>
<head>
<meta charset="UTF-8">
<title>选择话题</title>
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
<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" />
<link href="../css/basic.css" rel="stylesheet" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/jquery-2.1.1.min.js"></script>
<style>
* {
font-family: PingFangSC-Medium;
}
.title {
margin: 20px 15px 7px !important;
color: #6d6d72 !important;
font-size: 15px !important;
}
.topic-title {
font-size: 16px;
font-weight: 400;
}
.mui-title {
font-family: PingFangSC-Medium;
font-size: 18px;
color: #303030;
letter-spacing: 0;
text-align: center;
}
.mui-bar-nav {
top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-icon {
color: black;
}
.mui-placeholder {
background: #F5F5F5 !important;
border-radius: 16px !important;
}
input[type="search"] {
background: #F5F5F5 !important;
border-radius: 16px;
}
.mui-search .mui-placeholder {
text-align: left;
margin-left: 4%;
}
.mui-icon-search::before {
content: '\e466';
color: #CCC;
}
.mui-placeholder span {
font-size: 14px;
color: #CCCCCC;
letter-spacing: 0;
line-height: 19px;
}
.mui-table-view::before {
background: none;
}
.mui-table-view-cell::after {
background: none;
}
.mui-table-view::after {
background: none;
}
.mui-bar .mui-icon {
font-size: 32px;
position: relative;
z-index: 20;
padding-top: 6px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-closeempty mui-pull-left"></a>
<h1 class="mui-title">选择话题</h1>
</header>
<div class="mui-content">
<div style="background-color: white;padding-top: 1rem;">
<div class="mui-input-row mui-search" style="width: 79%;display: inline-block;margin-left: 4%;">
<input onkeyup="checkContent(this)" type="search" class="mui-input-clear" placeholder="搜索话题" style="border-radius: 16px;">
</div>
<button type="button" class="mui-btn" style="font-size:1rem;width: 15%;display: inline-block; border: 0px; background-color: transparent;">
取消
</button>
</div>
<ul class="mui-table-view" id="auto_div">
<!--<li class="mui-table-view-cell">
<h4 class="topic-title">#大碗宽面</h4>
<p>1888车主围观</p>
</li>
<li class="mui-table-view-cell">
<h4 class="topic-title">#话题2</h4>
<p>18车主围观</p>
</li>
<li class="mui-table-view-cell">
<h4 class="topic-title">#话题3</h4>
<p>888车主围观</p>
</li>-->
</ul>
</div>
<script>
// var value = "大碗宽面";
// var value1 = "话题2";
// var html = "";
// html +=
// '<li onclick="to('' + value + '')" class="mui-table-view-cell">' +
// '<h4 class="topic-title" >#大碗宽面</h4>' +
// '<p>1888车主围观</p>' +
// '</li>' +
// '<li onclick="to1('' + value1 + '')" class="mui-table-view-cell">' +
// '<h4 class="topic-title">#话题2</h4>' +
// '<p>18车主围观</p>' +
// '</li>';
// $('.mui-table-view').html(html)
// var test_list = [html];
// var old_value = "";
// //自动完成
// function AutoComplete(auto, search, mylist) {
// if($("#" + search).val() != old_value || old_value == "") {
// var autoNode = $("#" + auto); //缓存对象（弹出框）
// var carlist = new Array();
// var n = 0;
// old_value = $("#" + search).val();
// for(i in mylist) {
// if(mylist[i].indexOf(old_value) >= 0) {
// carlist[n++] = mylist[i];
// }
// }
// if(carlist.length == 0) {
// autoNode.hide();
// return;
// }
// autoNode.empty(); //清空上次的记录
// for(i in carlist) {
// var wordNode = carlist[i]; //弹出框里的每一条内容
// var newDivNode = $("<div>").attr("id", i); //设置每个节点的id值
// newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框
// }
// }
// //点击页面隐藏自动补全提示框
// /*document.onclick = function (e) {
// var e = e ? e : window.event;
// var tar = e.srcElement || e.target;
// if (tar.id != search) {
// if ($("#" + auto).is(":visible")) {
// $("#" + auto).css("display", "none")
// }
// }
// }*/
// }
// $(function() {
// old_value = $("#search_text").val();
// $("#search_text").focus(function() {
// if($("#search_text").val() == "") {
// AutoComplete("auto_div", "search_text", test_list);
// }
// });
// $("#search_text").keyup(function() {
// AutoComplete("auto_div", "search_text", test_list);
// });
// });
function checkContent(obj) {
var json = [];
json.push("#话题1");
json.push("#话题2");
var html = "";
var str = $(obj).val();
var value = ["话题1", "话题2"];
console.log(str)
for(var i = 0; i < json.length; i++) {
if(json[i].indexOf(str) != -1) {
html +=
'<li onclick="tob('' + value[i] + '')" class="mui-table-view-cell">' +
'<h4 class="topic-title">' + json[i] + '</h4>' +
'<p>1888车主围观</p>' +
'</li>';
}
}
$("#auto_div").html(html);
}
/*$("#search_text").keyup(function() {
});*/
function tob(value) {
var searchUrl = encodeURI("newtopic.html?valus=" + value);
window.location.href = searchUrl;
}
$(function() {
var value = "话题1";
var value1 = "话题2";
var html = "";
html +=
'<li onclick="to('' + value + '')" class="mui-table-view-cell">' +
'<h4 class="topic-title">#话题1</h4>' +
'<p>1888车主围观</p>' +
'</li>' +
'<li onclick="to1('' + value1 + '')" class="mui-table-view-cell">' +
'<h4 class="topic-title">#话题2</h4>' +
'<p>18车主围观</p>' +
'</li>';
$('.mui-table-view').html(html)
})
function to(value) {
var searchUrl = encodeURI("newtopic.html?valus=" + value);
window.location.href = searchUrl;
}
function to1(value1) {
var searchUrl = encodeURI("newtopic.html?valus=" + value1);
window.location.href = searchUrl;
}
</script>
</body>
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
