当我们搜索时，总想要自己输入的字体显示为重点，今天我为大家解决这个问题
<!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><style type="text/css">.fonthighlight {color: red;font-weight: 600;font-size: 16px;}input {height: 25px;width: 300px;padding: 0;margin: 0;}button {padding: 0;margin: 0;height: 30px;width: 80px;background-color: orange;border: none;}button:hover {color: red;background-color: #00aaff;}ul {padding-left: 5px;margin-top: 5px;width: 300px;background-color: #efefef;border: #F0F0F0 solid 2px;border-radius: 0.2rem;display: none;}ul li {list-style-type: none;text-align: left;padding: 0;margin-top: 5px;}ul li:hover {background-color: #c7c7c7;cursor: pointer}</style><body><div><input placeholder="请输入搜索关键字..." type="text" name="" id="searchResult" value="" /><button type="button" onclick="onSearch()">搜索</button><ul id="associate"></ul></div><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></body></html>
这个问题如果可以解决您们的麻烦还请点个关注，Thanks♪(･ω･)ﾉ
