add search list

This commit is contained in:
lh_wang
2015-08-09 16:13:34 +08:00
parent 4f0e17eaff
commit 4fe66d415f
3 changed files with 49 additions and 17 deletions
+6 -7
View File
@@ -398,15 +398,14 @@ html body {
/*--------------------搜索自动补全---------------------------*/
.auto_complete{
position:absolute;
top:45px;
left:40px;
right:55px;
/*height:100px;*/
top:50px;
left:0px;
right:0px;
min-height:110px;
background-color:#fff;
z-index:10091;
/*opacity:0.9;
-webkit-opacity:0.9;
-moz-opacity: 0.9;*/
border-top:1px solid #ccc;
display:none;
}
+16 -4
View File
@@ -31,7 +31,6 @@
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/font-awesome.css" />
<link type="text/css" rel="stylesheet" href="css/tianqi.css" />
</head>
<body>
@@ -49,9 +48,22 @@
<i class="fa fa-search" style="font-size:20px;color:#FFFFFF;"></i>
</button>
</div>
<div class="auto_complete">
</div>
<script type="text/template" id="tpl_search">
<% for (var i in items){%>
<div style="margin-left:10px;border-bottom:1px solid #ddd;height:35px;line-height:35px;">
<i class="fa fa-search" style="color:#ccc;font-size:15px;"></i>
<span style="font-size:14px;margin-left:4px;">
<%=items[i].router%>
</span>
<span style="font-size:12px; margin-left:4px;color:#999;">
<%=items[i].desc%>
</span>
</div>
<%}%>
</script>
<div class="auto_complete" id="SEARCH_TPL"></div>
<!--描述:其他功能-->
<div class="tools">
<div id="tools_list" class="sh tools_items">
+27 -6
View File
@@ -2,16 +2,37 @@
define('home/search', function(require, exports, module){
var $ = require('lib/zepto_pj');
var input = $('#search_input_text');
var router = [
'上海 到 扬州 两日游',
'上海 到 常州 一日游',
'上海 到 衢州 一日游'
];
var tpl = $('#tpl_search').html();
var container = $('#SEARCH_TPL');
var data = {
items:[
{
router: '上海到扬州',
desc: '两日游'
},
{
router: '上海到常州',
desc: '一日游'
},
{
router: '上海到衢州',
desc: '两日游'
},
{
router: '郑州到青岛',
desc: '三日游'
}
]
};
//focus事件
input.on('focus', function(){
var html = _.template(tpl)(data);
container.html(html);
container.fadeIn();
});