js实现搜索关键字高亮

html

<div>
			<input placeholder="请输入搜索关键字..." type="text" name="" id="searchResult" value="" />
			<button type="button" onclick="onSearch()">搜索</button>
			<ul id="associate"></ul>
		</div>

js

	<script>
			// 解决动态生成元素无法绑定事件
			// @param {Object} type 事件类型
			// @param {Object} fun 回调函数
			Element.prototype.on = function(type, fun) {
				window.addEventListener ? this.addEventListener(type, fun) : this.attachEvent('on' + type, fun);
			}

			let globalSearchKey = ''

			let associate = document.querySelectorAll("#associate")[0];

			function bindEvent(associateChildNodes, event) {
				for (let i = 0; i < associateChildNodes.length; i++) {
					associateChildNodes[i].on(event, function() {
						let matchNods = this.childNodes;
						if (matchNods && matchNods.length > 0) {
							for (let i = 0; i < matchNods.length; i++) {
								globalSearchKey += matchNods[i].innerHTML;
							}
						}

						console.log("选项被点击:", this.childNodes);
						document.getElementById("searchResult").value = globalSearchKey.trim();
						globalSearchKey = '';
						console.log("globalSearchKey", globalSearchKey)
						// associate.style.display = 'none';
						associate.style.visibility = 'hidden';
					});
				}
			}
			
			// 想法:把包含搜索关键字的位置分四种情况考虑：
			// 1.没有找到匹配到搜索关键字，直接返回原字符串
			// 2.搜索关键字在头部
			// 3.搜索关键字在尾部
			// 4.搜索关键字在中间
			// 搜索关键字高亮
			// @param {Object} source 原字符串[搜索结果]
			// @param {Object} target 子字符串[搜索关键字]

			function highlightText(source, target) {
				if (!source || !target) {
					return '';
				} else {
					let indexPosition = source.indexOf(target)
					if (indexPosition != -1) {
						let sourceLength = source.length;
						let prefix = source.substring(0, indexPosition);
						let suffixIndex = (prefix ? prefix.length : 0) + (target ? target.length : 0);
						let suffix = source.substring(suffixIndex, sourceLength);
						if (indexPosition == 0) {
							return `<span class="fonthighlight target">${target}</span><span class="suffix">${suffix}</span>`;
						} else if (indexPosition + target.length == source.length) {
							return `<span class="prefix">${prefix}</span><span class="fonthighlight target">${target}</span>`;
						} else {
							return `<span>${prefix}</span><span class="fonthighlight target">${target}</span><span>${suffix}</span>`;
						}
					} else {
						return `<span>${source}<span/>`;
					}
				}
			}

			// 联想数据
			let shading = [
				'枫原万叶',
				'散兵',
				'胡桃',
				'钟离',
				'雷电将军',
				'八重神子',
				'荒龙一斗',
				'可莉女儿'
			];


			function onSearch() {
				let currentSearchKey = document.getElementById("searchResult").value;
				if (!currentSearchKey) {
					alert("搜索关键字不能为空!")
				}
				alert("当前搜索关键字:" + currentSearchKey);
				// associate.style.display = 'none';
				associate.style.visibility = 'hidden';
			}

			let dom = document.getElementById("searchResult");
			// 输入框值改变匹配关键字高亮[底纹数据可换成联想数据]
			dom.oninput = (event) => {
				if (!event.target.value) {
					associate.innerHTML = '<li>暂无匹配数据!</li>';
					return;
				}
				let matchHtml = '';
				shading.forEach((item, index, slef) => {
					let matchResultText = highlightText(item, event.target.value);
					matchHtml += (`<li>` + matchResultText + "</li>");
				});

				associate.innerHTML = matchHtml;
				// 重新渲染一定要重新绑定事件
				let associateChildNodes = associate.childNodes;
				bindEvent(associateChildNodes, 'click');
			}



			// 输入获得焦点[获取底纹数据]
			dom.onfocus = (event) => {
				hint();
			}
			// 输入失去焦点
			dom.onblur = (event) => {
				console.log("失去焦点")
			}


			// 获得焦点是提示的底纹

			function hint() {
				let associateHtml = '';
				shading.forEach((item, index, slef) => {
					associateHtml += `<li ><span >${item} </span></li>`;
				});

				associate.innerHTML = associateHtml;
				associate.style.display = 'block';

				let associateChildNodes = associate.childNodes;
				associate.style.visibility = 'visible';
				// 绑定事件 
				bindEvent(associateChildNodes, 'click');
			}
		</script>