js实现搜索框跳转功能 |
您所在的位置：网站首页 › html弹出框怎么跳转页面了呢 › js实现搜索框跳转功能 |
js实现搜索框跳转功能
|
毕设篇：搜索框的逻辑实现
功能说明 实现搜索框的响应跳转功能，符合匹配条件跳转对应页面，不符合弹出alert提示框或跳转404页面 案例实现源码 提取码：love 效果展示
代码实现 sousuo.html （主页面） 搜索功能 .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; } 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"); } } }jd.html（跳转页面，下面类推） 景区管理 首页 >
hotel.html 首页 >
ms.html 首页 >
公共js，css代码 img { width: 300px; height: 180px; } 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: {} });知识总结 具体构思 首先，将需要匹配的关键词按类分别放置不同的数组中 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，可自行删除
|
【本文地址】
今日新闻 |
推荐新闻 |