SVG HTML+JS+SVG搜索框下拉列表

最新推荐文章于 2022-05-10 17:50:05 发布
最新推荐文章于 2022-05-10 17:50:05 发布
阅读量544 收藏
点赞数
分类专栏： HTML+CSS+SVG+VUE 文章标签： html5 SVG javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43434300/article/details/108195787
版权

html5 svg+js搜索框下拉列表显示更多代码，在搜索框输入文字的时候显示更多信息，这个更多选项在js里面自定义设置。

css文件夹下的

googleapos-family.css

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OX-hpOqc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OVuhpOqc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OXuhpOqc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUehpOqc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OXehpOqc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OXOhpOqc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOX-hpOqc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOXuhpOqc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUehpOqc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOXehpOqc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

style.css

html,
body {
  height: 100vh;
  width: 100vw;
  margin:0;padding:0;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: #007991;
  background: -webkit-gradient(linear, left top, left bottom, from(#78ffd6), to(#007991));
  background: linear-gradient(to bottom, #78ffd6, #007991);
}

.type-ahead {
  width: 100%;
  max-width: 250px;
  position: relative;
  -webkit-perspective: 500px;
          perspective: 500px;
}
.type-ahead__input {
  padding: 12px 34px 12px 12px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  letter-spacing: .4px;
  caret-color: #007991;
  color: #007991;
  outline: none;
  width: calc(100% - 46px);
  box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.1);
}
.type-ahead__input::-webkit-input-placeholder {
  opacity: .5;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
  color: #6E6E6E;
}
.type-ahead__input::-moz-placeholder {
  opacity: .5;
  -moz-transition: opacity .2s linear;
  transition: opacity .2s linear;
  color: #6E6E6E;
}
.type-ahead__input:-ms-input-placeholder {
  opacity: .5;
  -ms-transition: opacity .2s linear;
  transition: opacity .2s linear;
  color: #6E6E6E;
}
.type-ahead__input::-ms-input-placeholder {
  opacity: .5;
  -ms-transition: opacity .2s linear;
  transition: opacity .2s linear;
  color: #6E6E6E;
}
.type-ahead__input::placeholder {
  opacity: .5;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
  color: #6E6E6E;
}
.type-ahead__input:focus::-webkit-input-placeholder {
  opacity: .7;
}
.type-ahead__input:focus::-moz-placeholder {
  opacity: .7;
}
.type-ahead__input:focus:-ms-input-placeholder {
  opacity: .7;
}
.type-ahead__input:focus::-ms-input-placeholder {
  opacity: .7;
}
.type-ahead__input:focus::placeholder {
  opacity: .7;
}
.type-ahead .icon {
  position: absolute;
  right: 8px;
  top: 8px;
  fill: #6E6E6E;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  fill: #007991;
}
.type-ahead__suggestions {
  padding: 4px 0;
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 42px;
  margin: 0;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
}
.type-ahead__suggestions.hidden {
  opacity: 0;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  pointer-events: none;
  -webkit-transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s;
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
}
.type-ahead__suggestions .suggestion {
  color: #6E6E6E;
  list-style: none;
  font-size: 12px;
  margin: 0;
  padding: 8px 12px;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  cursor: pointer;
}
.type-ahead__suggestions .suggestion .match {
  font-weight: bold;
  overflow-wrap: break-word;
}
.type-ahead__suggestions .suggestion:hover {
  color: #007991;
}

js 文件夹下的script.js

const suggestions = document.querySelector('.type-ahead__suggestions')
const input = document.querySelector('.type-ahead__input');


suggestions.addEventListener('click', (e) => {
	if(e.target.classList.contains('match')) {
		input.value = e.target.parentNode.innerText;
	} else {
		input.value = e.target.innerText;
	}
	suggestions.classList.add('hidden');
})

input.addEventListener('keyup', (e) => {
	if(e.code === 'Enter') 	return suggestions.classList.add('hidden');
	const text = event.target.value;
	if(!text) {
		return suggestions.classList.add('hidden')
	} else {
		suggestions.classList.remove('hidden')
		const suggestionItems = `
			<li class="suggestion"><span class="match">${text}</span></li>
			<li class="suggestion">${highLightMatch('好棒',text)}</li>
			<li class="suggestion">${highLightMatch('棒棒哒',text)}</li>
			<li class="suggestion">${highLightMatch('棒棒哒呼',text)}</li>
		`;
		suggestions.innerHTML = suggestionItems;
	};
});

function highLightMatch(sentence, targetText) {
	const regex = new RegExp(targetText, 'gi');
	return sentence.replace(regex, `<span class="match">${targetText}</span>`)
}

html代码：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5搜索输入框下拉列表</title>
<link rel="stylesheet" href="css/googleapos-family.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="type-ahead">
	<input type="text" class="type-ahead__input" placeholder="输入关键词...">
	<svg class="icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
		<path d="M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"></svg>
	<ul class="type-ahead__suggestions hidden"></ul>
    </div>

    <script  src="js/script.js"></script>

</body>
</html>

 

豆皮没有豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SVG text内容搜索高亮 （JS搜索功能替代ctrl+F）
浩然正气
03-11 1869
问题：ctrl+F无法实现对svg里面的文本搜索并且高亮显示； 解决：最终通过JS实现了本搜索功能，发布源代码如下： 第一步，把代码保存为.html格式；第二步，使用chrom浏览器打开，在文本框输入待搜索字符，点击按钮搜索即可。 3692-DMD|NM_004006 TCCTGGCATCAGTTACTGTGTTGACTCACTCAGTGTTGGGATCAC
Element+Vue+SVG给下拉框选项添加图标
u013221050的博客
12-22 807
简单记录一下 代码 SvgIcon.vue 组件用来简单封装svg <template> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon',
bootstrap搜索框_Bootstrap 开源 SVG 图标库 Bootstrap Icons
weixin_39586335的博客
11-20 171
Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons，其团队表示这是有史以来第一次拥有自己的图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以免费用于任何项目，无论此项目是否使用了 Bootstrap。软件类型：开源图标授权协议：MIT开发语言：JavaScript开发厂商：Twitter查看 Bootstrap Icons »http...
swift-MRefresh把SVG动画集成到下拉刷新中
08-15
MRefresh 把 SVG 动画集成到下拉刷新中
HTML5 SVG超炫搜索图标和搜索框转换动画特效
12-12
这是一款效果非常炫酷的HTML5 SVG搜索图标和搜索框转换动画特效。该特效中使用SVG制作一个搜索按钮图标，在点击这个图标的时候，它会变形转换为一个圆角的搜索框。当点击搜索框的关闭按钮时，搜索框又转换为搜索图标。
jQuery带搜索过滤功能的下拉列表框
06-12
文件夹`css`中的样式表文件用于定义下拉列表框的外观和布局，包括搜索框、选项列表的样式、高亮当前选项的方法等。CSS是实现UI定制化的重要工具。 9. **HTML结构**： `index.html`文件包含了项目的HTML结构，如`...
基于html5+css3模拟学院网页的源码设计.zip
最新发布
06-15
【压缩包子文件的文件名称列表】中的"code"可能指的是项目的源代码文件夹，其中包含了HTML文件（如index.html）和CSS文件（如style.css）。HTML文件会定义网页的结构和内容，而CSS文件则负责定义样式和布局。开发者...
html+css商城首页
09-21
6. **搜索功能**：提供搜索框让用户快速查找商品，可使用`<form>`元素和`<input>`元素创建，配合JavaScript实现即时搜索建议和提交事件处理。 7. **促销和广告**：商城首页往往会有轮播图或滑块展示促销信息，这...
自己用html+css仿写的淘宝，可以用来交作业，应付期末考试用
10-24
在仿写淘宝的过程中，需要创建各种元素来模拟页面上的导航栏、商品列表、搜索框、用户登录模块等组件。例如，`<div>`用于创建分区，`<a>`定义超链接，`<img>`插入图片，`<ul>`和`<li>`用于列表，`<form>`和`<input>`...
DIV+CSS模板
01-10
3. **头部和底部**：可能包括页眉（logo、搜索框、登录/注册按钮等）、页脚（版权信息、联系方式等）的设计。 4. **内容区域**：多种布局方式，如两列、三列、网格布局，适用于展示产品、文章列表等。 5. **多媒体...
SVG与html的交互(svg的js与html的js互调用)
04-14
SVG与html的交互(svg的js与html的js互调用)
SVG响应式侧边下拉菜单特效代码
03-20
SVG响应式侧边下拉菜单代码是一款适用于个人中心侧边下拉菜单界面代码。
基于SVG的图元对象描述模型的研究
04-18
提出了一种基于MNO文件格式的图元对象描述模型，该模型采用面向对象的方法描述图元的几何形 状、应用属性以及与外界的交互功能，利用图元属性的继承与重载等机制减小描述图元信息的数据量’ 给出了 该模型在电力系统中应用的一个具体实例，实践表明该模型能够有效地减轻网络传输的负担、减少用户界面的响应时间.
这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果
08-10
这是一款使用html5 svg和css3制作的炫酷select下拉菜单美化效果。这个select下拉菜单美化效果有滑动、淡入淡出、网格、环形菜单等8种不同效果，用到了html5,css3和js等技术。
SVG模拟下拉选框功能
yanhappiness
06-05 1550
由于svg标签内不支持html原生select标签。所以想要用下拉选框功能需要自己模拟。 效果图如下： 要求： 点击下拉选框，显示可选菜单 鼠标在可在选菜单滑动，展示不同选项。 点击可选菜单，改变下拉选框的内容，同时关闭可选菜单 技术 新建clipPath遮罩层，可选菜单引用遮罩层，仅展示4条可选项 滑动滚轮触发mousewheel事件，每次增加/减少一个可选框的高度，当大...
html搜索框代码_SVG与html的交互(svg的js与html的js互调用)
weixin_39603476的博客
11-29 170
以下这个例子显示了，在html中单击命令按钮设定svg中的矩形的填充颜色，并且调用svg的js函数FunCallByHtmlJs，产生个消息框。在svg中，单击矩形时，设置html中的text的文本内容，并且调用html的js函数FunCallBySvgJs，产生个消息框。svg文档以嵌入在html文档中运行。例子在IE 6.0 + Adobe SVG Viewer 3.03中文版下测试通过。sv...
svg绘制向下图标动画
飞鱼日记的博客
08-10 353
svg绘制向下图标动画 效果展示 css3代码 .down { -webkit-animation: bounce 4s 2s infinite; animation: bounce 4s 2s infinite; color: hsla(0,0%,100%,.8); height: 34px; width: 34px; position: absolute; bottom: 10px; cursor: pointer } .down:hover { color: #fff
html5图标经过效果,HTML5 SVG超炫搜索图标和搜索框转换动画特效
weixin_29807369的博客
06-03 454
这是一款效果非常炫酷的HTML5 SVG搜索图标和搜索框转换动画特效。该特效中使用SVG制作一个搜索按钮图标，在点击这个图标的时候，它会变形转换为一个圆角的搜索框。当点击搜索框的关闭按钮时，搜索框又转换为搜索图标。制作方法HTML结构该搜索框特效使用一个来制作搜索图标，搜索框中的关闭图标是一个空的，使用CSS3将它制作为关闭图标。data-init="M160,3 L160,3 a27,27 0 ...
做一个动态搜索框
Ned的CSDN博客
05-10 480
大家好，我是Ned👀 欢迎关注我的公众号：前端成长日记,我们一同成长 前言 动态的搜索框已经不是什么稀有的东西了，因为它的动，它可以出现在任何符合它位置的地方。 今天咱也来整一个，看看效果？ 大致就是最开始显示的是一个图标，鼠标移动上去的话，它就变成了正常搜索框的样子可以进行输入并搜索。 来看一下如何实现的！ 开始整活 整体HTML就是一个div套着一个input跟一个a，a标签中放icon，我是复制的svg。 <div class="search-box"> .
svg+apf的仿真
12-02
同时，SVG APF仿真还可以与其他Web技术结合，例如HTML、CSS和JavaScript，实现更加丰富和动态的流体仿真效果。 总而言之，SVG APF的仿真是一种利用SVG技术展示APF流体仿真结果的方法。通过将粒子数据转化为SVG格式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆皮没有豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值