`

搜索结果关键字高亮显示

 
阅读更多

String.prototype.highlight = function(word) {

if(!word) throw new Error('WordRequired');

 

return this.replace(new RegExp(word,'gi'), function(w){

return '<strong class="text-danger">'+w+'</strong>';

});

};

 

$(function() {

$('#eventSearchId').click(function (e) {

e.preventDefault();

 

var keyword = $('#keywordId').val();

var sportName = $('#sportId').val();

var eventTypeId = $('#eventTypeId').val();

if(!keyword){

alert("please input league/team/eventId keyword");

return;

}

 

if(keyword.length < 2){

alert("please keyword's length must be greater than 2");

return;

}

 

$.ajax({

url : 'searchEvents',

data : {

keyword : keyword,

sportName:sportName,

eventTypeId:eventTypeId

},

dataType : 'json',

type : 'POST',

success : function(res) {

var searchContentDiv = $("#searchContentId");

searchContentDiv.empty();

searchContentDiv.append("<table border='8' id='searchContentTableId' align='center'></table>");

$("#searchContentTableId").append("<tr><td>EventId</td><td>Date</td><td>LeagueName</td><td>HomeTeam</td><td>AwayTeam</td><td>Operation</td></tr>");

for(var i = 0;i<res.length;i++) {

$("#searchContentTableId").append("<tr>" +

"<td>"+res[i].eventId.highlight(keyword)+"</td>" +

"<td>"+res[i].dateTime+"</td>" +

"<td>"+res[i].leagueName.highlight(keyword)+"</td>" +

"<td>"+res[i].homeTeam.highlight(keyword)+"</td>" +

"<td>"+res[i].awayTeam.highlight(keyword)+"</td>" +

"<td><button type='submit' id="+res[i].eventId+">delete</button></td>" +

"</tr>");

}

},

error : function(err) {

console.log(err);

}

});

});

});

分享到:
评论

相关推荐

    搜索关键字高亮显示

    在IT领域,搜索关键字高亮显示是一项常见的功能,它能够帮助用户快速定位并理解搜索结果中的重要信息。这种技术广泛应用于搜索引擎、文本编辑器、数据分析工具等软件中,提升用户体验,使得查找目标内容更为直观。 ...

    ListView搜索关键字高亮显示

    在这个主题中,我们将深入探讨如何实现ListView中的搜索关键字高亮显示功能。 首先,我们需要理解搜索功能的基本原理。在Android应用中,通常会有一个搜索框(EditText)供用户输入关键字,当用户输入内容时,我们...

    如何设置SecureCRT窗口输出代码关键字高亮

    本文将详细介绍如何在SecureCRT中设置关键字高亮显示,帮助用户更高效地工作。 #### 工具/原料 - SecureCRT Version 6.5.0 (build380) - Official Release - December 10, 2009 - 操作系统:Windows 7 旗舰版 64位 ...

    关键字高亮显示、文本解析

    "关键字高亮显示"是一种常见的文本处理技术,它可以帮助用户快速定位和识别关键信息,提高阅读效率。这种技术通常应用于代码编辑器、搜索引擎结果展示、文档阅读器等多个场景。 首先,我们要理解“高亮显示”的概念...

    Android搜索关键字高亮显示

    Android搜索关键字高亮显示,意思就是当你输入某个关键字进行搜索时,在搜索到的结果中,您搜索的关键字会以另外的颜色突显出来,给用户更好的视觉体验。 技术文章地址:...

    Lunene分页关键字高亮显示

    标题 "Lunene分页关键字高亮显示" 暗示了我们正在讨论一个与搜索引擎或数据检索相关的项目,其中涉及到了Lunene(可能是Lucene的误拼),一种广泛使用的全文搜索引擎库,以及如何在搜索结果中实现分页和关键字高亮。...

    jS 正则表达式实现关键字高亮显示

    总之,利用JavaScript和正则表达式实现关键字高亮显示是一个涉及字符串处理、正则匹配和DOM操作的过程。通过创建合适的正则表达式模式,进行字符串替换,以及应用适当的CSS样式,我们可以有效地突出显示文本中的关键...

    百度全文内容关健搜索,关键字高亮显示出来

    接着,我们探讨如何实现关键字高亮显示。当搜索结果返回时,通常会将查询词在匹配的文档段落中突出显示,通常是通过加粗、改变颜色或者用特殊标记来实现。这一过程分为以下几个步骤: 1. **关键词提取**:用户输入...

    用JS将搜索的关键字高亮显示实现代码

    总之,通过JavaScript实现关键字高亮显示是一项常见的需求,可以通过遍历文档、查找关键字并替换匹配内容来完成。理解这一过程对于提高网页的用户体验和互动性具有重要意义。在实际应用中,应根据具体需求进行调整和...

    excel VBA高亮显示关键字.xla

    wps VBA excel高亮显示关键字 excel在搜索关键字时会把关键字高亮突出显示出来 遇到关键字就自动变色高亮的 , 是可以自己定义要变色的关键字

    react中实现搜索结果中关键词高亮显示

    在React中实现搜索结果中关键词高亮显示的核心知识点可以分为几个部分: 1. 使用React组件的状态(state)和属性(props)进行交互。 2. 利用JavaScript的filter函数对数据进行过滤。 3. 使用正则表达式(RegExp)...

    swift-HighlightedSearch类似微信的客户端本地搜索搜索关键字高亮显示

    3. **搜索关键字高亮显示**: 高亮显示关键字是提高用户体验的重要方式,它能帮助用户快速定位到搜索结果中的关键信息。在iOS中,可以使用NSAttributedString来实现,通过设置特定范围内的文字属性(如颜色、背景色或...

    JQuery 关键字高亮插件

    在Web开发中,我们经常需要实现文本中的关键字高亮显示,以便用户能快速找到他们关注的信息。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件来帮助开发者实现这一功能。本篇文章将深入探讨一款名为...

    c++关键字实现高亮字

    做了一个简单的编辑程序,在编写C,C++文件时,让关键字高亮显示。

    C# winform 文本编辑器中高亮显示关键字

    在C# WinForm应用开发中,创建一个具备文本编辑功能的界面是常见的需求,而让关键字高亮显示则可以提高代码可读性和用户体验。本文将详细介绍如何在C# WinForm中利用FastColoredTextBox控件实现这一功能。 ...

    react-一个可以把文本中多个关键字高亮显示的react组件

    这个“react-一个可以把文本中多个关键字高亮显示的react组件”就是为了满足这样的需求而设计的。这个组件可以帮助开发者轻松地实现关键词高亮功能,提升用户在浏览和搜索文本时的体验。 首先,让我们了解React组件...

    php 多关键字 高亮显示实现代码

    标题 "php 多关键字 高亮显示实现代码" 描述了一个使用 PHP 实现的搜索功能,其中包含了关键字高亮显示的代码。这个功能允许用户在输入框中输入多个关键字(用空格分隔),然后在搜索结果中将这些关键字以高亮的形式...

    js 关键字搜索高亮显示相关材料

    首先,我们需要理解搜索的关键字高亮显示的基本原理。这通常涉及到以下几个步骤: 1. **接收用户输入**:用户在搜索框中输入关键字,我们通过`event.target.value`获取到输入的文本。 2. **字符串处理**:将关键字...

Global site tag (gtag.js) - Google Analytics