js实现搜索框跳转功能
最新推荐文章于 2024-05-07 23:35:02 发布
高中不复，大学纷飞
最新推荐文章于 2024-05-07 23:35:02 发布
阅读量7k
收藏
104
点赞数
15
最新推荐文章于 2024-05-07 23:35:02 发布
阅读量7k
收藏
104
点赞数
15
毕设篇：搜索框的逻辑实现
功能说明
实现搜索框的响应跳转功能，符合匹配条件跳转对应页面，不符合弹出alert提示框或跳转404页面
效果展示
代码实现
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，可自行删除
521
暂无认证
到【灌水乐园】发言
咸鱼要翻身448: 这是什么时候的数据
2401_85123377: 谢谢好心人
Ddddddm_: 数据集可以求一下吗万分感谢有偿
m0_66585204: 你好 可以求一下music_message.csv文件吗 感谢感谢
痛仰abc: 你好 可以求一下music_message.csv文件吗