实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）

类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红

代码如下：

<!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里面封装代码：

function myId(id) {

return document.getElementById(id);

}

将搜索的关键词标红的代码为：

 var reg = new RegExp("(" + text + ")", "g"); //正则表达式var newstr = pObj.innerHTML.replace(reg, "<span style='color: red;'>$1</span>"); //让内容中与输入的内容相同的部分显示为红色

其中$1为输入的那个关键字

实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）相关推荐

vue搜索关键字标红
实现效果:搜索框搜索关键字后,搜索出的列表名称关键字标红页面内容:如果包含关键字则拆分成三个字段拼接,不包含刚直接显示字段 <label v-if="item.contain == ...
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
echarts tree (树图) 实现自定义节点图标自定义样式点击节点后线条变色自适应高度搜索后节点关键字标红写的很详细，建议收藏！
前言网上找了好久资料,没有一个完整实例,所以研究出来立马发布,共享下,希望能帮助到大家. 一.实现效果方式1:提供视频方式大家看下符不符合要求方式2:Demo演示地址点击此处,可查看演示地址 ...
vc 文本框只显示下划线_【Axure9百例】36.文本框搜索自动匹配
" 根据输入的内容自动显示匹配内容列表." 这是<Axure9百例>系列第36篇在文本框搜索时,自动匹配搜索的内容,并以列表的形式显示在文本输入框的下方,选中一项后当 ...
搜索关键词功能php,搜索关键词的智能提示是怎么实现的？
一,背景搜索的智能提示是一个搜索应用的标配,主要作用是避免用户输入错误的搜索词,并将用户引导到相应的关键词上,提升用户体验. 由于中文的特点,如果搜索自动提示可以支持拼音的话会给用户带来更大的方便, ...
html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. function $(id){ retur ...
html点击弹出文本框,html制作，点击文字超链接显示文本框，再点击文字超链接隐藏文本框...
window.οnlοad=function(){ document.getElementById('click').οnclick=function(){ if (document.getEleme ...
原生js赋值html,原生js文本框赋值点击文字给text文本框赋值表单提交
特效描述:文本框赋值文本框赋值表单表单提交. 代码结构 1. HTML代码菜单导航时间日期焦点图 tab标签 jquery特效在线客服官网 js代码 var x=["菜单导航& ...
html 文本框点击无样式,HTML文本框样式大全
输入框景背景透明: 鼠标划过输入框,输入框背景色变色: style="width: 106; height: 21" οnmοuseοut="this.style.bor ...

实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）

实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）相关推荐

最新文章

热门文章