多条件搜索

最新推荐文章于 2024-12-19 19:51:38 发布

原创

最新推荐文章于 2024-12-19 19:51:38 发布 · 474 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #jquery

这是一个关于如何使用HTML和jQuery创建一个多条件搜索框的示例。代码中定义了一个包含时间、地点、人物和情景等多个搜索条件的列表，每个条件都有一个输入框。用户可以输入关键词进行查询。此外，还有一个重置按钮和一个查询按钮。页面样式进行了基本的布局和美化，并且有一个‘展开/收起’的功能，允许用户显示或隐藏更多搜索条件。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>搜索</title>
       <script src="jquery-1.11.2.js"></script>
       <style>
           [rem="1920"]{font-size:5.2083333333vw}[rem="750"]{font-size:13.333333333vw}*{-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size:16px}figure,p{margin:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400}dd,dl,dt,li,ol,ul{margin:0;padding:0;list-style:none}a{background-color:transparent;text-decoration:none}img{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}button,input,select,textarea{color:inherit;font:inherit;margin:0;padding: 0;outline: none;}textarea{overflow:auto}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}template{display:none}.hidden2,.hidden3,.hidden4,.hidden5{display:-webkit-box;/* autoprefixer:off */-webkit-box-orient:vertical;overflow:hidden}.hidden1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hidden2{-webkit-line-clamp:2}.hidden3{-webkit-line-clamp:3}.hidden4{-webkit-line-clamp:4}.hidden5{-webkit-line-clamp:5}.clearfix::after,.clearfix::before{content:"";width:0;height:0;display:block;clear:both}
           .search-ul{
               width: 1000px;
               margin: 0 auto;
           }
           .search-ul li{
               float: left;
               width: 25%;
               margin-top: 20px;
           }
           .search-ul li label{
               float: left;
               width: 40%;
               height: 30px;
               line-height: 30px;
               text-align: right;
           }
           .search-ul li .search-box{
               float: left;
               width: 60%;
           }
           .search-ul li .search-box input{
               width: 100%;
               height: 28px;
               &nbs