JavaScript实现的搜索及高亮显示功能示例

本文实例讲述了Java脚本语言实现的搜索及高亮显示功能。分享给大家供大家参考，具体如下：

情景： 用来筛选列表中的数据，由于单条数据很简短，没有用php mysql去实现筛选功能，只用爪哇岛描述语言进行筛选，匹配的高亮，或者将不匹配的隐藏掉

效果图：

html:

' div class='合同-标题'名称：输入类型=“文本”值=' id=' search _ contract _ name '/div class=' contracts-header '代码：输入类型=“文本”值id=' search _ contract _ code '占位符='不区分大小写/div class=' contracts-header '按钮点击=' search()'查找/button/div id=' contracts-list ' ul Li输入类型=' checkbox ' name=' contract[]' value=' code | name '/span name(code)/span/Li Li输入类型=' checkbox ' name=' contract[]' value=' code | name '/span name(code)/span/Li/ul/div JavaScript :

函数search(){ var search _ contract _ name=$(' # search _ contract _ name ').val()；var search _ contract _ code=$(' # search _ contract _ code ').val()；if(search _ contract _ name search _ contract _ code){//两个输入框都有值搜索_合同_代码=搜索_合同_代码。tolowercase()；//不区分大小写，全部转换为小写，下同$('input[name='contract[]']').每个（函数(){ var code _ name=this . value var search _ code=code _ name。tolowercase().indexOf(search _ contract _ code)；var search _ name=code _ name。tolowercase().indexOf(search _ contract _ name)；if(search _ code=0 search _ name=0){//this。下一个兄弟。风格。背景色=' # FFDEAD//高亮匹配到的这个。ParentNode。风格。display=' block} else {//this。下一个兄弟。风格。background COlOr=这个。ParentNode。风格。显示='无'；//隐藏不匹配的} } );} else if(search _ contract _ name | | search _ contract _ code){//只有一个输入框有值search _ contract _ name=search _ contract _ name。长度？search _ contract _ name : ' XXX '；//默认为xxx是因为不可能存在XXX搜索_合同_代码=搜索_合同_代码。长度？搜索_合同_代码。tolowercase(): ' XXX '；$('input[name='contract[]']').每个（函数(){ var code _ name=this . value var search _ code=code _ name。tolowercase().indexOf(search _ contract _ code)；var search _ name=code _ name。tolowercase().indexOf(search _ contract _ name)；if(search _ code=0 | | search _ name=0){//this。下一个兄弟。风格。背景色=' # FFDEAD这个。ParentNode。风格。display=' block} else {//this。下一个兄弟。风格。background COlOr=这个。ParentNode。风格。显示='无'；} } );}}更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数据结构与算法技巧总结》 、 《JavaScript数学运算用法总结》 、 《JavaScript排序算法总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。