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

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 = `
			
${text}
			
${highLightMatch('好棒',text)}
			
${highLightMatch('棒棒哒',text)}
			
${highLightMatch('棒棒哒呼',text)}
		`;
		suggestions.innerHTML = suggestionItems;
	};
});

function highLightMatch(sentence, targetText) {
	const regex = new RegExp(targetText, 'gi');
	return sentence.replace(regex, `${targetText}`)
}

html代码：