标签 Laravel 下的文章

仿图书检索系统第二弹jQuery(页面功能)


仿图书检索系统第二弹

主要应用jQuery

  • 主要是用jQuery来调控多数量的信息输入检索框,~哎简单点说就是实时检测input状态~,检索检索!!!=> 当然主要是用MySql进行数据的多重多重多重检索(这里并没有卡带~~~),考虑到后端搞太多的条件拼接不怎么好处理(个人感觉,大神勿喷~)索性就直接在前端根据使用者填入的条件来搞,觉得还方便点~(手动滑稽)

主要用到的jQuery的知识部分:

  • 先来了解了解jQuery对于input框的捕捉
    • JQuery实时监听input中值变化
      <!DOCTYPE html>
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <title>RunJS</title>
          <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
          </head>
          <body>
              <h1 >
                  实时监测input中值的变化
              </h1>
              <input type="text" id="testinput" autoComplete='off'>
              <div id="output"></div>
          </body>
      </html>
$(function(){
    $('#testinput').bind('input propertychange', function() {
        $('#output').html($(this).val().length + ' characters');
    });
})

oninput,onpropertychange,onchange的用法:
oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同, 它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
onchange触发事件必须满足两个条件:
1、当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
2、当前对象失去焦点(onblur);


汇总 onchange onpropertychange 和 oninput 事件的区别
1. onchange 事件与 onpropertychange 事件的区别:
onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发。
onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是该事件 IE 专有。
2.oninput 事件与 onpropertychange 事件的区别:
oninput 事件是 IE 之外的大多数浏览器支持的事件,在 value 改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过 js 改变 value 时,却不会触发。
onpropertychange 事件是任何属性改变都会触发的,而 oninput 却只在 value 改变时触发,oninput 要通过 addEventListener() 来注册,onpropertychange 注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
3.oninput 与 onpropertychange 失效的情况:
(1)oninput 事件:a). 当脚本中改变 value 时,不会触发;b).从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange 事件:当 input 设置为 disable=tru e后,onpropertychange 不会触发。

下划线之中来源于菜鸟教程笔记 => 在此附上链接 => https://www.runoob.com/jsref/event-oninput.htm
在了解了上述用法后,我们就开始吧~~~

介绍部分:

最初为何会写这个东西,是因为图书馆老师找到了我的一个~灰常NB~的学长,他的时间有些紧,所以找到了高小盆友和我~,我们负责分别负责前端和后端,当时数据是需要我们自己爬取的,接着用以前的那一丢丢php爬虫的入门菜鸟级别的经验爬了爬试试,不爬不知道,一爬一~懵逼~,在这附上他们网站的链接 = >https://www.zhihuiya.com/ 没有账号的可以申请一个试用,~就是当时申请了一下试用,后期的时候把我吓坏了~这个网站的安全措施很足,~普通菜鸟级别的爬虫玩家一边玩泥巴去吧~而且最重要的一点,他们网站采用的基本全是动态渲染(动态渲染是个啥?自个百度去,~哭了,你凶我~)简单来说就是你查看网页源码查看不了什么有用的信息(原本想用QueryList + Guzzle来着,反正到最后泡汤了 )页面结果是这样滴,如下:
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=google value=notranslate><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=keywords content="Patsnap Analytics View"><title></title><style>.analytics-website {
                height: 100%;
                width: 100%;
            }
            #header-wrapper {
                position: fixed;
                z-index: 999;
                width: 100%;
                height: 64px;
                background: #fff;
                border-bottom: 1px solid #e0e0e0;
                color: #061632;
            }</style><script>window.CDN_BASE_URL = "//static-analytics.cdn.zhihuiya.com";
            window.CDN_I18N_HOST = "//static-core-i18n.cdn.zhihuiya.com";</script><!--[if IE 9]>
        <script type="text/javascript">
          try{
              console.log(11)
          }catch (e){
              ;(function(g) {
                  'use strict';
                  var _console = g.console || {};
                  var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'exception', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];

                  var console = {version: '0.1.0'};
                  var key;
                  for(var i = 0, len = methods.length; i < len; i++) {
                      key = methods[i];
                      console[key] = function (key) {
                          return function () {
                              if (typeof _console[key] === 'undefined') {
                                  return 0;
                              }

                              Function.prototype.apply.call(_console[key], _console, arguments);
                          };
                      }(key);
                  }

                  g.console = console;
              }(window));
          }
        </script>
        <![endif]--><link href=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/css/chunk-vendors.001cda67.css rel=stylesheet><link href=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/css/index.7c16337e.css rel=stylesheet></head><body><noscript><strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div class=analytics-website><div id=header-wrapper><div id=header></div></div><div id=view-root></div></div><iframe id=marvinjs-package src=/marvinjs_latest/marvinpack.html width=0 height=0 frameborder=0 scrolling=no style=position:absolute;top:0;left:0;width:0;height:0;border:0;></iframe><script src=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/js/chunk-vendors.bb328504.js></script><script src=//static-analytics.cdn.zhihuiya.com/analytics-patent-view/9.23.9/js/index.c483e8e0.js></script><script src=//static-analytics.cdn.zhihuiya.com/analytics-fundation/9.23.9/js/index.js></script></body></html>
看到这些我当时心里虽然~万只草泥马奔腾而过~但我那受伤的心灵还是抱有一丝丝希冀的,直到~~~我了解到phantomjs,能不能不要让我更加绝望~这里附上一篇CSDN的文章 => https://blog.csdn.net/mxdzchallpp/article/details/82971348 关键是之后我了解到phantomjs很久很久很久不更新维护了能不能最开始就不要让我知道~,之后十月一期间,我想了想还是用Python爬虫吧,普通的根据https请求url估摸着行不通(网站安全级别太高,整不了,虽然自己有正规账号,但是然并卵~)还是用Python 的另一种爬取方法吧webdriver类似于脚本(小时候玩游戏外挂用过吧?对对对就是那个,没错,自动帮你操纵~不管三七二十一,只要你网页上你能看到的都能给你扒拉下来(●'◡'●)),在学校鼓捣了一个黄金七天(现学现卖速度是不是有点慢),基本整出来了(传送门点这!!!),可悲的是到最后验收的时候考虑到效率问题(效率肯定没有普通抓https url来的快,但是没法啊)还有安全问题(虽然老师的账号正规,但是爬取那么多数据怕是有封号的危险)
反正到最后没用这套方案,我的心里~上亿只草泥马奔腾~嘘~就用了学长说的另一套方案,学长找到一个免费下载说明书的网站(免费的~呼~)剩下的look look~哦,我这蹩脚的英语~哦,这该死的翻译腔~
最终效果图:

TIM图片20200108105536.png

~说实话,写的时候没加注释,现在看都不知道写的啥玩意了~
我数了一下,光input输入框就有24个,条件select框还有20个 ~难搞哦~
HTML部分:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/searchView.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>专利搜索</title>
</head>

<body>
    <div class="area">

        <div class="container">
            <ul class="circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <nav class="row justify-content-center">欢迎使用山东理工大学,专利检索系统</nav>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Search View</a></li>
                </ol>
            </nav>
            <form method="POST" id="form1">
                {{ csrf_field() }}
                <ul class="container">
                    <!-- 0 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control col-3" placeholder="标题" disabled>
                            <input type="text" class="form-control" id="title" name="title" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- 1 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="abstract_option" id="select1">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="摘要" disabled>
                            <input type="text" class="form-control" id="abstract" name="abstract" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- 2 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="demands_option" id="select2">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="权利要求" disabled>
                            <input type="text" class="form-control" id="demands" name="demands" placeholder="例如:太阳能">
                        </div>
                    </li>
                    <!-- 3 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="demand_option" id="select3">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="独立权利要求" disabled>
                            <input type="text" class="form-control" id="demand" name="demand" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- 4 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="introduction_option" id="select4">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="说明书" disabled>
                            <input type="text" class="form-control" id="introduction" name="introduction" placeholder="例如:太阳能电池">
                        </div>
                    </li>
                    <!-- t5 -->
                    <li class=" field-item time">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ask_begin_date_option" id="select5">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="申请日" disabled>
                            <input type="date" class="form-control" id="ask_begin_date" name="ask_begin_date" placeholder="例如:132465789">
                            <!-- <span class="input-group-text">到</span> -->
                            <div class="timedao">
                                <input type="text" class="input-group-text form-control" style="width:50px;" placeholder="到" disabled>
                            </div>
                            <input type="date" class="form-control" id="ask_over_date" name="ask_over_date" placeholder="例如:132465789">
                        </div>
                    </li>
                    <!-- t6 -->
                    <li class=" field-item time">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="public_begin_date_option" id="select6">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="公开公告日" disabled>
                            <input type="date" class="form-control" id="public_begin_date" name="public_begin_date" placeholder="例如:132465789">
                            <!-- <span class="input-group-text">到</span> -->
                            <div class="timedao">
                                <input type="text" class="input-group-text form-control" style="width:50px;" placeholder="到" disabled>
                            </div>
                            <input type="date" class="form-control" id="public_over_date" name="public_over_date" placeholder="例如:132465789">
                        </div>
                    </li>
                    <!-- t7 -->
                    <li class=" field-item time">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="priority_begin_date_option" id="select7">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="优先权日" disabled>
                            <input type="date" class="form-control" id="priority_begin_date" name="priority_begin_date" placeholder="例如:132465789">
                            <!-- <span class="input-group-text">到</span> -->
                            <div class="timedao">
                                <input type="text" class="input-group-text form-control" style="width:50px;" placeholder="到" disabled>
                            </div>
                            <input type="date" class="form-control" id="priority_over_date" name="priority_over_date" placeholder="例如:132465789">
                        </div>
                    </li>
                    <!-- 8 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="public_number_option" id="select8">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="公开(公告)号" disabled>
                            <input type="text" class="form-control" id="public_number" name="public_number" placeholder="例如:US123456">
                        </div>
                    </li>
                    <!-- 9 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ask_number_option" id="select9">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="申请号" disabled>
                            <input type="text" class="form-control" id="ask_number" name="ask_number" placeholder="例如:US10/123456">
                        </div>
                    </li>
                    <!-- 10 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="priority_number_option" id="select10">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="优先权号" disabled>
                            <input type="text" class="form-control" id="priority_number" name="priority_number" placeholder="例如:JP2013270967">
                        </div>
                    </li>
                    <!-- 11 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ipc_number_option" id="select11">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="IPC分类号" disabled>
                            <input type="text" class="form-control" id="ipc_number" name="ipc_number" placeholder="例如:A61K">
                        </div>
                    </li>
                    <!-- 12 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="ipc_primary_number_option" id="select12">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="IPC主分类号" disabled>
                            <input type="text" class="form-control" id="ipc_primary_number" name="ipc_primary_number" placeholder="例如:A61K">
                        </div>
                    </li>
                    <!-- 13 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="cpc_number_option" id="select13">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="CPC分类号" disabled>
                            <input type="text" class="form-control" id="cpc_number" name="cpc_number" placeholder="例如:Y02B60/50">
                        </div>
                    </li>
                    <!-- 14 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="loc_number_option" id="select14">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="LOC分类号" disabled>
                            <input type="text" class="form-control" id="loc_number" name="loc_number" placeholder="例如:01-01">
                        </div>
                    </li>
                    <!-- 15 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="origin_name_option" id="select15">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="原始申请(专利权)人" disabled>
                            <input type="text" class="form-control" id="origin_name" name="origin_name" placeholder="例如:华为">
                        </div>
                    </li>
                    <!-- 16 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="present_name_option" id="select16">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="当前申请(专利权)人" disabled>
                            <input type="text" class="form-control" id="present_name" name="present_name" placeholder="例如:华为">
                        </div>
                    </li>

                    <!-- 17 -->
                    <!-- <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="origin_name_option" id="select17">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="原始申请(专利权)人" disabled>
                            <input type="text" class="form-control" id="origin_name" name="origin_name" placeholder="例如:华为">
                        </div>
                    </li> -->
                    <!-- ??? -->
                    <!-- 18 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="present_name_address_option" id="select18">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="当前申请(专利权)人地址" disabled>
                            <input type="text" class="form-control" id="present_name_address" name="present_name_address" placeholder="例如:北京朝阳区">
                        </div>
                    </li>
                    <!-- 19 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="invent_name_option" id="select19">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="发明人" disabled>
                            <input type="text" class="form-control" id="invent_name" name="invent_name" placeholder="例如:李书福">
                        </div>
                    </li>
                    <!-- 20 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="agent_name_option" id="select20">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="代理人" disabled>
                            <input type="text" class="form-control" id="agent_name" name="agent_name" placeholder="例如:吴乐观">
                        </div>
                    </li>
                    <!-- 21 -->
                    <li class=" field-item normal">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <select name="agent_company_name_option" id="select21">
                                    <option value="AND">AND</option>
                                    <option value="OR">OR</option>
                                    <option value="NOT">NOT</option>
                                </select>
                            </div>
                            <input type="text" class="form-control col-3" placeholder="代理机构" disabled>
                            <input type="text" class="form-control" id="agent_company_name" name="agent_company_name" placeholder="例如:132465789">
                        </div>
                    </li>
                </ul>
            </form>
        </div>
        <div class="interval"></div>
        <div class="fixed-bottom">
            <div class="container">
                <!-- <h2>卡片头部和底部</h2> -->
                <div class="card bom">
                    <!-- <div class="card-header">头部</div> -->
                    <div class="card-body">
                        <div>
                            <span id="title_result"></span>
                            <!-- 1 -->
                            <span id="abstract_option"></span>
                            <span id="abstract_result"></span>

                            <!-- 2 -->
                            <span id="demands_option"></span>
                            <span id="demands_result"></span>

                            <!-- 3 -->
                            <span id="demand_option"></span>
                            <span id="demand_result"></span>

                            <!-- 4 -->
                            <span id="introduction_option"></span>
                            <span id="introduction_result"></span>

                            <!-- t5 -->
                            <span id="ask_begin_date_option"></span>
                            <span id="ask_begin_date_result"></span>
                            <span id="ask_over_date_result"></span>
                            <span id="ask_result"></span>


                            <!-- t6 -->
                            <span id="public_begin_date_option"></span>
                            <span id="public_begin_date_result"></span>
                            <span id="public_over_date_result"></span>
                            <span id="public_result"></span>

                            <!-- t7 -->
                            <span id="priority_begin_date_option"></span>
                            <span id="priority_begin_date_result"></span>
                            <span id="priority_over_date_result"></span>
                            <span id="priority_result"></span>

                            <!-- 8 -->
                            <span id="public_number_option"></span>
                            <span id="public_number_result"></span>

                            <!-- 9 -->
                            <span id="ask_number_option"></span>
                            <span id="ask_number_result"></span>

                            <!-- 10 -->
                            <span id="priority_number_option"></span>
                            <span id="priority_number_result"></span>

                            <!-- 11 -->
                            <span id="ipc_number_option"></span>
                            <span id="ipc_number_result"></span>

                            <!-- 12 -->
                            <span id="ipc_primary_number_option"></span>
                            <span id="ipc_primary_number_result"></span>

                            <!-- 13 -->
                            <span id="cpc_number_option"></span>
                            <span id="cpc_number_result"></span>

                            <!-- 14 -->
                            <span id="loc_number_option"></span>
                            <span id="loc_number_result"></span>

                            <!-- 15 -->
                            <span id="origin_name_option"></span>
                            <span id="origin_name_result"></span>

                            <!-- 16 -->
                            <span id="present_name_option"></span>
                            <span id="present_name_result"></span>

                            <!-- 17 -->
                            <span id="origin_name_option"></span>
                            <span id="origin_name_result"></span>

                            <!-- 18 -->
                            <span id="present_name_address_option"></span>
                            <span id="present_name_address_result"></span>

                            <!-- 19 -->
                            <span id="invent_name_option"></span>
                            <span id="invent_name_result"></span>

                            <!-- 20 -->
                            <span id="agent_name_option"></span>
                            <span id="agent_name_result"></span>

                            <!-- 21 -->
                            <span id="agent_company_name_option"></span>
                            <span id="agent_company_name_result"></span>

                        </div>
                        <span id="mergeVal"></span>
                        <span id="mergeTimeVal"></span>
                    </div>
                    <div class="card-footer">
                        <!-- <button id="mergeOption">合并</button>
                        <button id="mergeOptionTime">时间合并</button> -->
                        <form action="/search_data" method="POST" class="form-inline">
                            {{ csrf_field() }}
                            <input type="hidden" id="submitVal" class="form-control search_data" type="text" name="transData" value="" placeholder="Search">
                            <button type="submit" id="searchBtn" class="btn btn-primary">开始搜索</button>
                        </form>
                        <button id="clears" class="btn btn-secondary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/patentSearch.js"></script>
    <script>
    </script>
</body>

</html>

还有一个小问题,就是在当时我写的时候HTML5更新了一次,input框多了个属性type="date"专门来处理日期的,但是jQuery还不能单独捕获这个属性的input框~最初想法破灭,头疼哦~~无奈全部选中吧~(主要用了propertychange这个属性,具体见上述)建议还是先看最后的全部code~
$('input').bind('input propertychange', function () {
            var currentName = $(this).attr('name');//看看当前哪个input状态发生了变化
            console.log(currentName);
            var TypeOfInput = judgeTimeInput(currentName);//看看发生状态变化的input是不是data
            console.log(TypeOfInput);
            var idName = '#' + currentName;//拼接一个id名
            var result = '#' + $(this).attr('name') + '_result';//这里用了span来接收值,同样拼id
            var option = '#' + $(this).attr('name') + '_option';//too
            console.log(result, option);
            if (TypeOfInput == 3) {//不同情况下拼接
                $(result).html($(this).attr('name') + ' LIKE ' + "'%" + $(this).val() + "%'");
            } else if (TypeOfInput == 1) {
                $(result).html('(' + $(this).attr('name') + ' >= ' + "'" + $(this).val() + "'" + ')');
            } else {
                $(result).html('(' + $(this).attr('name') + ' <= ' + "'" + $(this).val() + "'" + ')');
            }
            console.log($(result).text(), $(option).text());
            var select = judgeSelect(currentName);//这里是看当前input前的条件select是啥
            console.log(select);
            var data = $(this).val().length;
            console.log(data);//以下是看看select条件是啥   AND OR NOT???根据具体情况拼接
            if (data == 0) {
                $(result).empty();
                $(option).empty();
                $(select).val('AND');
            } else {
                $(option).html($(select).val());
                console.log($(option).text());
                $(select).change(function () {
                    var selVal = $(select).val();
                    if (selVal == "NOT") {
                        $(option).html('AND ' + $(this).val());
                        if ((TypeOfInput == 1) || (TypeOfInput == 2)) {
                        } else {
                            $(result).html($(idName).attr('name') + ' LIKE ' + '(' + "'%" + $(idName).val() + "%'" + ')');
                        }
                    } else {
                        $(option).html($(this).val());
                    }
                });
            }
        });

所用函数及其他:
 //因为title没有单独的select,所以单独写了一个
$('#title').bind('input propertychange', function () {
            $('#title_result').html($(this).attr('name') + '=' + "'" + $(this).val() + "'");
            var data = $(this).val().length;
            if (data == 0) {
                $('#title_result').empty();
            }
        }); 
var inputAoptionVal = [//定义了俩数组,对照着HTML部分看
            ['abstract', '#select1'],
            ['demands', '#select2'],
            ['demand', '#select3', ''],
            ['introduction', '#select4'],
            ['ask_begin_date', '#select5'],
            ['ask_over_date', '#select5'],
            ['public_begin_date', '#select6'],
            ['public_over_date', '#select6'],
            ['priority_begin_date', '#select7'],
            ['priority_over_date', '#select7'],
            ['public_number', '#select8'],
            ['ask_number', '#select9'],
            ['priority_number', '#select10'],
            ['ipc_number', '#select11'],
            ['ipc_primary_number', '#select12'],
            ['cpc_number', '#select13'],
            ['loc_number', '#select14'],
            ['origin_name', '#select15'],
            ['present_name', '#select16'],
            // ['origin_name', '#select17'],
            ['present_name_address', '#select18'],
            ['invent_name', '#select19'],
            ['agent_name', '#select20'],
            ['agent_company_name', '#select21']
        ];

        var inputDataVal = [
            ['ask_begin_date', 'ask_over_date', '#select5', 'ask_result'],
            ['public_begin_date', 'public_over_date', '#select6', 'public_result'],
            ['priority_begin_date', 'priority_over_date', '#select7', 'priority_result']
        ]
        //判断是哪个input对应的select
        function judgeSelect(currentName) {
            var currentName = currentName;
            var returnSelect;
            for (var i = 0; i < inputAoptionVal.length; i++) {
                returnSelect = inputAoptionVal[i][0];
                if (returnSelect == currentName) {
                    returnSelect = inputAoptionVal[i][3];
                    break;
                }
            }
            return returnSelect;
        }
        //因为title没有单独的select,所以单独写了一个
        function judgeTitle() {
            if ($('#title').val().length != 0) {
                $('#mergeVal').append($('#title_result').text());
                return true;
            } else {
                return false;
            }
        }
        //用于传给后端的MySql语句
        function transferStorage() {
            var transferStr = $('#mergeVal').text();
            $("#submitVal").attr('value', transferStr);
            // console.log($("#submitVal").val());
        }
        //
        function judgeTime(currentIdName) {
            var currentIdName = currentIdName;
            // console.log(currentIdName);
            currentIdNameLen = $(currentIdName).val().length;
            console.log(currentIdName, currentIdNameLen);
            if (currentIdNameLen != 0) {
                // console.log(currentIdNameLen);
                return true;
            } else {
                // console.log(currentIdNameLen);
                return false;
            }
        }
        //合成MySql
        function mergeOptionTime(condition1, condition2, condition3, condition4) {
            console.log(condition1, condition2, condition3, condition4);
            var res1 = $(condition1).text()
            var res2 = $(condition2).text()
            var currentOptionRest = $(condition3).val();
            // console.log(currentOptionRest);
            console.log(res1, res2);
            var endRes = ' ' + currentOptionRest + '(' + ' ' + res1 + ' ' + 'AND' + ' ' + res2 + ')';
            // console.log(endRes);
            $(condition4).append(endRes);
            console.log($(condition4).text());
            console.log($('#mergeVal').text());
            var resVal = $(condition4).text();
            console.log(endRes);
            $('#mergeVal').append(resVal);
            console.log($('#mergeVal').text());
        }
        //判断时间input的输入
        function judgeTimeInput(currentName) {
            var currentName = currentName;
            console.log(currentName);
            console.log(inputAoptionVal.length);
            var i = 0;
            for (var j = 0; j < inputDataVal.length; j++) {
                if (currentName == inputDataVal[j][0]) {
                    i = 1;
                    break;
                } else if (currentName == inputDataVal[j][4]) {
                    i = 2;
                    break;
                } else {
                    i = 3;
                    continue;
                }
            }
            return i;
        }
        //合成函数
        function mergeOption() {
            var currentVal;
            var currentResult;
            var currentOption;
            var titleCondition = judgeTitle();
            // console.log(titleCondition);
            for (var i = 0; i < inputAoptionVal.length; i++) {
                if ((i == 4) || (i == 5) || (i == 6) || (i == 7) || (i == 8) || (i == 9)) {
                    continue;
                } else {
                    currentIdResult = '#' + inputAoptionVal[i][0];
                    currentOption = '#' + inputAoptionVal[i][0] + '_option';
                    currentResult = '#' + inputAoptionVal[i][0] + '_result';
                    currentIdResult = $(currentIdResult).val().length;
                    if (currentIdResult != 0) {
                        currentVal = ' ' + $(currentOption).text() + ' ' + $(currentResult).text();
                        $('#mergeVal').append(currentVal);
                    } else {
                        continue;
                    }
                }
            }
            if (!titleCondition) {
                var endVal = $('#mergeVal').text();
                endVal = endVal.slice(5);
                $('#mergeVal').text(endVal);
            }
            for (var i = 0; i < inputDataVal.length; i++) {
                var condition1 = judgeTime('#' + inputDataVal[i][0]);
                var condition2 = judgeTime('#' + inputDataVal[i][5]);
                var condition3 = inputDataVal[i][6];
                var condition4 = '#' + inputDataVal[i][7];
                console.log(condition1, condition2, condition3, condition4)
                if ((condition1) && (condition2)) {
                    condition1 = '#' + inputDataVal[i][0] + '_result';
                    condition2 = '#' + inputDataVal[i][8] + '_result';
                    console.log(condition1, condition2, condition3, condition4);
                    mergeOptionTime(condition1, condition2, condition3, condition4);
                } else {
                    continue;
                }
            }
            transferStorage();
        }
        //重置按钮
         $('#clears').click(function () {
            $('span').empty();
            $('select').val('AND');
            $('input').val('');
        });
        //搜索按钮
        $('#searchBtn').click(function () {
            mergeOption();
        });
综合附上一个git地址吧:
点这点这

召唤看板娘