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

功能说明

实现搜索框的响应跳转功能，符合匹配条件跳转对应页面，不符合弹出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"><pathd="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><pathd="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内，否则执行404for (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，可自行删除

js实现搜索框跳转功能相关推荐

js百度搜索框功能模拟
这里我们就废话不多说了,直接上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
纯js实现搜索框自动补全
纯js实现搜索框自动补全开发语言:HTML+CSS+JS 编辑器:VSCode 构建思路:建立两个div,一个用于输入和搜索,一个用于展示,用于展示的初始状态为隐藏的.后面当有键盘输入事件时就显示, ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
js实现搜索框智能搜索提示，类似百度搜索
List item 一.概要场景:用户可能记不得是哪个搜索词了,但是结果表单是唯一的,不可能实现模糊搜索. 解决方案:搜索框实现智能搜索提示.在用户搜索键入关键字的过程中,不断去请求后台,将查询结果 ...
智能搜索框html代码,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...
实现百度搜索框提示语功能
利用百度jsonp接口实现搜索提示语. jsonp.js封装 function jsonp(url, options) {// 创建script标签var $script = document.cre ...
实训第六天：搜索框布局及功能实现，实现上下滑动
1.实现小程序天气预报搜索框 <input class='ipt' placeholder-class='pla' placeholder='请输入城市名,快速查询天气信息' bindconfi ...
原生js实现搜索框点击搜索清空历史记录
实现思路 1.点击搜索框:注册点击事件 2.获取用户输入的值 3.将用户输入的值添加到本地存储:1)由于输入不止一个值且后期需要保存相关数据,故一定要存成数组或对象,所以要定义一个空数组2)由于值可能 ...
数据库关键字搜索查询html,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...

js实现搜索框跳转功能

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

js实现搜索框跳转功能相关推荐

最新文章

热门文章