JavaScript实现搜索联想关键字高亮功能
使用原生js+css+html实现的输入框搜索联想的功能，并集搜索关键字高亮。
完整代码如下：
不需要任何依赖库，粘贴复制即可运行。
<!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 = [
'java入门到入土',
'30天精通java',
'java编程思想',
'jvm虚拟机参数调优',
'为什么jdk更新那么快?',
];
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>
以上就是JavaScript实现搜索联想关键字高亮功能的详细内容，更多关于JavaScript关键字高亮的资料请关注我们其它相关文章！
相关推荐
-
javascript网页关键字高亮代码
//高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/
-
用JS将搜索的关键字高亮显示实现代码
用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.
-
JavaScript简单实现关键字文本搜索高亮显示功能示例
本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
javascript 关键字高亮显示实现代码
关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET
-
JavaScript实现关键字高亮功能
高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head>中引入下面javascript方法: 复制代码 代码如下: <script type="text/javascript"> //<![CDATA[ //--------begin function fHl(o, flag, rndColor, url)-----
-
vue+Element实现搜索关键字高亮功能
最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索.为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮. 一.实现思路 1 实时监控表格,实现关键字的定位: 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮). 二.实现过程 1 搜索条件表单 了解了实现思路,就让我们一起来看一下实现过程(关键位置均给了注释) <el-form :inline="true" :model="formQuery" > <el
-
jQuery实现搜索页面关键字的功能
在一篇文章中查找关键字,找到后高亮显示. 具体代码: <html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <bo
-
JavaScript实现搜索框的自动完成功能(一)
在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT
-
ios实现搜索关键字高亮效果
一. 需求要求实现的效果 汉字支持汉字直接搜索.拼音全拼搜索.拼音简拼搜索 搜索匹配到的关键字高亮显示 搜索结果优先显示全部匹配.其次是拼音全拼匹配.拼音简拼匹配:关键字在结果字符串中位置越靠前,优先显示 支持搜索英文.汉字.电话号码及混合搜索 二. 需求分析 英文名称及电话号码的搜索直接使用完全匹配的方式即可 重难点是汉字的拼音相关的拼音全拼.简拼搜索,比如 "刘亦菲" 对应的搜索关键字有且只有以下三大类总计 25 种匹配汉字:"刘"."亦".
-
在 Angular 中实现搜索关键字高亮示例
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页
-
angularjs实现搜索的关键字在正文中高亮出来
1.定义高亮 filter 我们希望搜索的关键字在正文中高亮出来,正文内容就是过滤器的第一个参数,第二个参数就是搜索关键字,这样,我们的过滤器将会有两个参数了. 高亮的原理很简单,将需要高亮的内容使用 span 标记隔离出来,再加上一个高亮的 class样式 进行描述就可以了. app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: &quo
-
Android仿淘宝搜索联想功能的示例代码
现在不少应用都提供了搜索功能,有些还提供了搜索联想.对于一个搜索联想功能,最基本的实现流程为:客户端通过监听输入框内容的变化,当输入框发生变化之后就会回调afterTextChanged方法,客户端利用当前输入框内的文字向服务器发起请求,服务器返回与该搜索文字关联的结果给客户端进行展示.服务器那边,一般要做内存缓存池,就是把有可能的结果都放在内存中. 效果图 APP这边也有几个重要的问题需要我们思考 当搜索词为空时,不应该发起网络请求. 在用户连续输入的情况下,可能会发起某些不必要的请求.例如用
-
vue2实现搜索结果中的搜索关键字高亮的代码
具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用
-
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im