前台查询表单

我们可以通过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>

最终效果如下图：