类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>百度搜索框设置</title><style>* {margin: 0;padding: 0;}.header {width: 500px;margin: 50px auto;}#search {width: 250px;height: 36px;}#btn {height: 40px;width: 75px;margin-left: -5px;}</style></head><body><div class="header" id="header"><input type="text" value="" placeholder="输入内容" id="search"><input type="button" value="搜索" id="btn"></div></body><script src="../js/common.js"></script><script>// var keywords=["路遥知马力日久见人心","年轻正好","百年孤独","钢铁是怎么炼成的","海底两万里","资治通鉴"];var arr = "潘石屹 | 王 石 | 蒋锡培 | 向文波 | 牛根生 | 熊晓鸽 | 王冉 | 于清教 | 谢清海 | 刘旗辉 |刘步尘 | 陈达夫 | 船长 | 叶茂中 | 李士福 | 王进生 | 任志强 | 付伟 | 孙虹钢 | 宋新宇 | 王 微 | 翁向东 | 周济谱 | 袁岳 | 成君忆 | 艾学蛟 | 雷永军 | 刘秋华 | 宋炜 | 刘东华 |科特勒 | 陈志列 | 张巨峰 | 姚日来 | 李朝曙 | 刘兴亮 | 沧海 | 曾玉 | 姜汝祥 | 徐浩然 | 邓国坚|辜胜阻 | 范以锦 | 郭梓林 | 秦合舫 | 王育琨 | 王辉耀 | 胡奎 | 华仔 | 韩耀国 | 唐清建 |曲向东 | 李志起 | 吴伯凡 | 景素奇 | 贾昌荣 | 林国峰 | 沈坤 | 刘贤方 | 周永亮 | 马向阳 | 辜胜阻 | 范以锦 | 郭梓林 | 秦合舫 | 王育琨 | 王辉耀 | 胡奎 | 华仔 | 韩耀国 | 唐清建 |曲向东 | 李志起 | 吴伯凡 | 景素奇 | 贾昌荣 | 林国峰 | 沈坤 | 刘贤方 | 周永亮 | 马向阳 |熊焰 | 唐崇健 | 王广伟 | 孔繁任 | 刘孝全 | 徐浩然 | 沈青 ";// var arrName=arr.split("|");var keywords = arr.split("|");myId("search").onkeyup = function() {//每次键盘抬起，检测是否有 div ，有就删除if (myId("dv")) {myId("header").removeChild(myId("dv"));}var text = this.value; //获取文本框中输入的内容var tempArr = []; //临时数组，存放对应数组上的数据for (var i = 0; i < keywords.length; i++) {if (keywords[i].indexOf(text) != -1) { //如果数组中有输入的字tempArr.push(keywords[i]);}}if (this.value.length == 0 || tempArr.length == 0) { //检测文本框中是否有内容if (myId("dv")) { //文本框没有内容的话，如果有div，则删除myId("header").removeChild(myId("dv"));}return;}var dvObj = document.createElement("div"); //创建divmyId("header").appendChild(dvObj);dvObj.id = "dv";dvObj.style.width = "252px";// dvObj.style.height="100px";dvObj.style.border = "1px solid green";for (var i = 0; i < tempArr.length; i++) {var pObj = document.createElement("p"); //div 中添加pdvObj.appendChild(pObj);pObj.innerText = tempArr[i];pObj.style.cursor = "pointer";pObj.style.marginTop = "3px";pObj.style.marginLeft = "3px";// var array = pObj.innerHTML.split(""); //将一段字符串分割成单个字的数组// pObj.innerHTML.replace(/(年)/igm,"<span style='color: red;'>$&</span>");var reg = new RegExp("(" + text + ")", "g"); //正则表达式var newstr = pObj.innerHTML.replace(reg, "<span style='color: red;'>$1</span>"); //让内容中与输入的内容相同的部分显示为红色// document.write(newstr + "<br />");pObj.innerHTML = newstr;pObj.onmouseover = function() {this.style.backgroundColor = "yellow";}pObj.onmouseout = function() {this.style.backgroundColor = "";}pObj.onclick = function() {myId("search").value = this.innerTextmyId('header').removeChild(dvObj)// console.log(this.innerText)}}}</script></html>
效果图如下方所示
common.js里面封装代码：
functionmyId(id){
returndocument.getElementById(id);
}
将搜索的关键词标红的代码为：
var reg = new RegExp("(" + text + ")", "g"); //正则表达式var newstr = pObj.innerHTML.replace(reg, "<span style='color: red;'>$1</span>"); //让内容中与输入的内容相同的部分显示为红色
其中$1为输入的那个关键字
