当我们搜索时，总想要自己输入的字体显示为重点，今天我为大家解决这个问题
<!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♪(･ω･)ﾉ
