html代码:
<html>
<head>
<meta charset="UTF-8">
<title>手动签到</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
<style type="text/css"> #autoBox { margin: 0px; padding: 0px; border: 1px solid #CCCCCC; width: 75%; } #autoBox li { clear: both; background-color: white; color: black; position: relative; top: 0px; left: 0px; line-height: 25px; width:100%; text-align: left; overflow: hidden; } #autoBox li:hover { background-color: gray; color: yellow; cursor: pointer; } .searchBox { overflow: hidden; padding: 0 10px; } .searchBox .inpB { background: #fff; border: 1px solid #ebebeb; line-height: 40px; border-radius: 5px; width: 70%; float: left; padding-left: 10px; } .searchBox .inpB input { width: 90%; outline: none; height: 40px; } .searchBox .sm { background: #fff; border: 1px solid #ebebeb; line-height: 40px; border-radius: 5px; width: 10%; float: left; padding-left: 10px; } .searchBox .weui-btn { width: 20%; float: right; line-height: 42px; font-size: 14px; } .weui-btn { background-color: #ee3c4c; border-radius: 5px; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } input{ margin-right: 10px; } .inp{ float:right;padding:5px 15px;margin-top: 10px;background: #bbbbbb;color:#fff; } .inp1{ float:right;padding:5px 15px;margin-top: 10px;background: #3ca4ee;color:#fff; } .weui-btn:after { border: 0px solid rgba(0,0,0,.2); } </style>
<body>
<div class="searchBox" style="margin-top: 50px"> <div class="inpB"> <input type="text" placeholder="请输入学生学号或姓名" id="stuSearch" name="stuSearch"/> </div> <a class="weui-btn" onclick="search1(this)"> 查询 </a> <ul id="autoBox"> </ul> </div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> </head>
<script type="text/javascript"> $(function(){ $.ajaxSetup({cache:false}) ; //不缓存 //以下代码用于显示检索提示框 $("#autoBox").hide(); //初始化时隐藏补全提示框 $("#stuSearch").keyup(function(){ //输入框中的keyup事件激活以下查询行为 $("#autoBox").html(""); //先清空补全提示框原有内容 if($("#stuSearch").val().length>0) // 如果输入框不为空 { $.ajax({ //后台调用php文件进行查询 type:"post", url:"check", dataType:"json", data:{keywords:$("#stuSearch").val()}, success:function(res) { var a=res.data; $("#autoBox").show();// 显示补全提示框 for(i=0;i<a.length;i++) //将结果添加到提示框中 { $("#autoBox").append("<li>"+a[i]['name']+" 学号:"+(a[i]['stu_no'])+"</li>"); } $("#autoBox li").on("click",function(){ //为这些新增的li绑定单击事件,单击后将其值赋到输入框中 $("#stuSearch").val($(this).text().substr(-15)); }) //在提示框的最后添加一个li用来关闭 $("#autoBox li").on("click",function(){ // 添加单击事件,单击后隐藏提示框 $("#autoBox").hide(); }) } }); } }) }) </script>
</html>
php代码:
/* *连接数据库后查询你所需要的字段 *将结果传递到前台页面 */ public function check(){ if(request()->isAjax()){ $keywords=input('keywords'); $myrs=Db::name('student')->where('name|stu_no' ,'like','%'.$keywords.'%')->select(); if($myrs) { foreach ($myrs as $k => $v){ $temp[$k]['stu_no']=$v['stu_no']; $temp[$k]['name']=$v['name']; } $this->success('','',$temp); } } }