前台查询表单

我们可以通过 JS 脚本实现前台查询表单功能。

进入菜单 显示管理 -> 模板管理，找到我们需要显示页面的模板，在模板中添加如下代码：

<style>
  .s-header {
    padding-top: 20px;
    margin: 0 auto;
    width: 100%;
    position: relative;
  }
  .s-form {
    margin-top: 20px;
    height: 40px;
    border: none;
  }
  .s-form > div {
    float: left;
  }
  .s-form .input-box input {
    height: 40px;
    width: 296px;
    margin: 0;
    padding: 0 10px;
    border-color: #ccc;
    border-width: 1px;
    line-height: 36px;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-right: none;
  }
  .s-form .btn-box {
    float: left;
  }
  .s-form .btn-box input {
    height: 40px;
    line-height: 40px;
    border: none;
    background-color: #009994;
    font-size: 16px;
    color: #fff;
    text-align: center;
    width: 100px;
  }
</style>
<div class="s-header">
  <form class="s-form" action="{stl.currentUrl}">
    <div class="input-box">
      <input type="text" class="from-control" id="word" name="word" value="" />
    </div>
    <div class="btn-box">
      <input type="submit" class="btn search" value="搜 索" id="submit" />
    </div>
  </form>
</div>

<stl:form title="表单" type="list"></stl:form>

<script type="text/javascript" language="javascript">
  function getQuery(type) {
    var queryString = document.location.search;
    if (queryString == null || queryString.length <= 1) return;
    var reg = new RegExp("(^|&)" + type + "=([^&]*)(&|$)");
    var r = queryString.substring(1).match(reg);
    if (r == null || r.length <= 1) return;
    return decodeURI(decodeURI(r[2]));
  }

  var word = getQuery("word");
  var url = document.getElementsByTagName("iframe")[0].src;
  if (url.indexOf("&word=") !== -1) {
    url = url.substr(0, url.indexOf("&word="));
  }
  var word = getQuery("word");
  if (word) {
    document.getElementById("word").value = word;
    url += "&word=" + word;
  }
  document.getElementsByTagName("iframe")[0].src = url;
</script>

最终效果如下图：