js实现搜索框跳转功能

毕设篇：搜索框的逻辑实现功能说明实现搜索框的响应跳转功能，符合匹配条件跳转对应页面，不符合弹出alert提示框或跳转404页面效果展示代码实现sousuo.html （主页面）<!--* @Author: lzm* @Date: 2021-11-23 13:11:46* @Notes: 使用built命令快速得到一些常用的snippets,右击py文件可以preview代码* @LastEd

高中不复，大学纷飞

7652人浏览 · 2021-11-25 11:23:31

高中不复，大学纷飞 · 2021-11-25 11:23:31 发布

毕设篇：搜索框的逻辑实现

功能说明

实现搜索框的响应跳转功能，符合匹配条件跳转对应页面，不符合弹出alert提示框或跳转404页面

案例实现源码提取码：love

效果展示

代码实现

sousuo.html （主页面）

<!--
 * @Author: lzm
 * @Date: 2021-11-23 13:11:46
 * @Notes: 使用built命令快速得到一些常用的snippets,右击py文件可以preview代码
 * @LastEditTime: 2021-11-23 18:19:52
-->
<!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">
    <title>搜索功能</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .sousuo {
            margin: 200px 500px;
            text-align: center;
        }

        input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 13px 14px;
            width: 420px;
            height: 20px;
            font-size: 14px;
            font-family: "Microsoft soft";
        }

        .ipt {
            float: left;
        }

        .btn {
            float: left;
        }

        button {
            background: none;
            border: none;
            margin-left: -50px;
            margin-top: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="sousuo">
            <div class="ipt">
                <input type="text" name="" id="content" placeholder="景点/酒店/美食/城市">
            </div>
            <!-- <input type="button" name="" id="search"> -->
            <div class="btn">
                <button onclick="toHtml()">
                    <svg t="1637644951499" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2455" width="36" height="36">
                        <path
                            d="M425.9 144.9c38.1 0 75 7.4 109.6 22.1 33.5 14.2 63.7 34.5 89.6 60.4 25.9 25.9 46.2 56 60.4 89.6 14.7 34.7 22.1 71.6 22.1 109.6s-7.4 75-22.1 109.6c-14.2 33.5-34.5 63.7-60.4 89.6-25.9 25.9-56 46.2-89.6 60.4-34.7 14.7-71.6 22.1-109.6 22.1s-75-7.4-109.6-22.1c-33.5-14.2-63.7-34.5-89.6-60.4-25.9-25.9-46.2-56-60.4-89.6-14.7-34.7-22.1-71.6-22.1-109.6s7.4-75 22.1-109.6c14.2-33.5 34.5-63.7 60.4-89.6 25.9-25.9 56-46.2 89.6-60.4 34.7-14.6 71.6-22.1 109.6-22.1m0-80c-199.8 0-361.7 161.9-361.7 361.7s161.9 361.7 361.7 361.7 361.7-161.9 361.7-361.7S625.7 64.9 425.9 64.9z"
                            fill="#2C2C2C" p-id="2456"></path>
                        <path
                            d="M715.3 654l226.3 226.3c15.6 15.6 15.6 40.9 0 56.6-15.6 15.6-40.9 15.6-56.6 0L658.7 710.6c-15.6-15.6-15.6-40.9 0-56.6 15.6-15.6 41-15.6 56.6 0z"
                            fill="#5ABE64" p-id="2457"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>


</body>

</html>

<script>
        new Vue({
            //
            el: '#app',
            data: {
               
            },
            methods: {}
        });
        var cityList = ['城市', '张家界', '慈利', '桑植', '永定区', '武陵源']
        var siteList = ['景点', '张家界武陵源', '武陵源', '黄龙洞', '天门山', '玻璃桥', '茅岩河', '漂流'];
        var hotelList = ['酒店', '张家界国际大酒店', '韦斯特大酒店', '维也纳酒店', '华天大酒店'];
        var foodList = ['美食', '三下锅', '泡芙', '重庆鸡公煲', '酸肉鱼', '凉面']
        var totalList = [];//定义一个循环器，减少代码冗余,初始化为空
        totalList = totalList.concat(cityList, siteList, hotelList, foodList);
        console.log(totalList);
        function toHtml() {
            //城市默认跳转景点
            // console.log('hello world');
            var getval = document.getElementById("content").value;
            // console.log(getval);//str要被包含在getval内，否则执行404
            for (var city = 0; city < cityList.length; city++) {
                if (getval.match(cityList[city])) {
                    localStorage.name = [getval,cityList[0],'景点'];
                    console.log(localStorage.name);
                    return document.location.href = ("jd.html?content=" + getval);
                }
            }
            for (var site = 0; site < siteList.length; site++) {
                if (getval.match(siteList[site])) {
                    localStorage.name = [getval,siteList[0],'景点'];
                    return document.location.href = ("jd.html?content=" + getval);
                }
            }
            // getval.match("酒店")
            for (var hotel = 0; hotel < hotelList.length; hotel++) {
                if (getval.match(hotelList[hotel])) {
                    localStorage.name = [getval,hotelList[0],'酒店'];
                    return document.location.href = ("hotel.html?content=" + getval);
                }
            }
            for (var food = 0; food < foodList.length; food++) {
                if (getval.match(foodList[food])) {
                    localStorage.name = [getval,foodList[0],'美食'];
                    return document.location.href = ("ms.html?content=" + getval);
                }
            }
            for (var i = 0; i < totalList.length; i++) {
                if (!getval.match(totalList[i])) {
                    alert("很抱歉，没有找到你要的信息");
                    return ;
                    // return document.location.href = ("../404.html?content=404");
                }
            }
        }
    </script>

jd.html（跳转页面，下面类推）

<!--
 * @Author: lzm
 * @Date: 2021-11-23 13:11:56
 * @Notes: 使用built命令快速得到一些常用的snippets,右击py文件可以preview代码
 * @LastEditTime: 2021-11-23 18:31:22
-->
<!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">
    <title>景区管理</title>
    
</head>

<body>
    <!-- 父组件模板 -->

    <body>
        <div id="app">
            <div class="category">
                <a href="sousuo.html">首页</a> > <a id="cg" href="jd.html"></a>
            </div>
            <div >
                <img src="../img/img1.png" alt="">
                <span id="message"></span>
            </div>
        </div>
        
    </body>

</html>

hotel.html

<div id="app">
            <div class="category">
                <a href="sousuo.html">首页</a> > <a id="cg" href="jd.html"></a>
            </div>
            <div >
                <img src="../img/img1.png" alt="">
                <span id="message"></span>
            </div>
        </div>

ms.html

<div id="app">
            <div class="category">
                <a href="sousuo.html">首页</a> > <a id="cg" href="ms.html"></a>
            </div>
            <div >
                <img src="../img/img1.png" alt="">
                <span id="message"></span>
            </div>
        </div>

公共js，css代码

<script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        img {
            width: 300px;
            height: 180px;
        }
    </style>

<script>
            var value = localStorage["name"];
            console.log(value);
            var cg = document.getElementById("cg");
            var message = document.getElementById("message");
            cg.innerHTML = value.split(',')[2];
            message.innerHTML = '欢迎来到张家界，你输入的关键词是'+ value.split(',')[0] +', 搜索目录为' + value.split(',')[1];
            // alert(value);
            $("#message1").text(value);
            // 父组件
            new Vue({
                //
                el: '#app',
                data: {
                    
                },
                methods: {}
            });
        </script>

知识总结

具体构思

首先，将需要匹配的关键词按类分别放置不同的数组中

        var cityList = ['城市', '张家界', '慈利', '桑植', '永定区', '武陵源']
        var siteList = ['景点', '张家界武陵源', '武陵源', '黄龙洞', '天门山', '玻璃桥', '茅岩河', '漂流'];
        var hotelList = ['酒店', '张家界国际大酒店', '韦斯特大酒店', '维也纳酒店', '华天大酒店'];
        var foodList = ['美食', '三下锅', '泡芙', '重庆鸡公煲', '酸肉鱼', '凉面']
        var totalList = [];//定义一个循环器，减少代码冗余,初始化为空
        totalList = totalList.concat(cityList, siteList, hotelList, foodList);

其中totalList数组存放每个类目数组的所有数据，也就是数据合并，这样做的目的就是为了实现不满足匹配条件的跳转404页面这一功能，目前只想到这一种方法

其次，通过document.getElementById()获取搜索框中用户输入的数据value，构建循环匹配，只要满足循环数组中的其中一项就成功跳转

var getval = document.getElementById("content").value;
            // console.log(getval);//str要被包含在getval内，否则执行404
for (var city = 0; city < cityList.length; city++) {
    if (getval.match(cityList[city])) {
        localStorage.name = [getval,cityList[0],'景点'];
        console.log(localStorage.name);
        return document.location.href = ("jd.html?content=" + getval);
    }
}

再次，如何将获取的数据传递给下一个页面，这里使用get方法静态传值（缺点就是数据缺乏安全性），如何将数据保存在浏览器中，这里使用localStorage()方法

1. str.match()方法，正则表达式具体详情戳 JS-判断字符串中包含指定字符

2. 数组合并具体详情戳 JS数组合并(5种)

3. h5技术，window.localStorage存储数据具体详情戳关于html页面之间传值的几种方式

4. CSS Input 样式美化具体详情戳 CSS Input 样式美化 - 简书

问题思考

js向html传值，目前只有一种innerHTML最为简单和方便

关于js中循环代码的冗余问题，如有大佬有更加简洁的方法，欢迎评论区讨论！

说明：上述代码没有使用到vue.js，可自行删除