javascript实现简单搜索功能

2024-12-01 00:17:35

本文实例为大家分享了javascript实现简单搜索功能的具体代码，供大家参考，具体内容如下

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>New Web Project</title>
 <style>
 table{

 width: 500px;
 }
 td{
 border:1px solid #ccc;
 padding:5px;
 }
 </style>
 <script>
 window.οnlοad=function(){
 var oTb=document.getElementById('tb');
 var oldColor=null;
 var tName=document.getElementById('name');
 var oBtn=document.getElementById('btn');
 oBtn.οnclick=function(){
  var aRows=oTb.tBodies[0].rows;
  for(var i=0;i<aRows.length;i++)
  {
  var tdValue=aRows[i].cells[1].innerHTML.toLowerCase();
  var tNameValue=tName.value.toLowerCase().split(' ');
  for(var j=0;j<tNameValue.length;j++)
  {
  if(tdValue.search(tNameValue[j])>=0)
  {
  aRows[i].style.background='green';
  break;
  }
  else{
  aRows[i].style.background='';
  }
  }

  }
 };

 };
 </script>
 </head>
 <body>
 姓名：<input id='name' type="text"/>
 <input id="btn" type="button" value="搜索" />
 <table id="tb">
 <thead>
 <tr>
  <td>ID</td>
  <td>姓名</td>
  <td>年龄</td>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>1</td>
  <td>Blue</td>
  <td>23</td>
 </tr>
 <tr>
  <td>2</td>
  <td>李四</td>
  <td>26</td>
 </tr>
 <tr>
  <td>3</td>
  <td>王五</td>
  <td>29</td>
 </tr>
 <tr>
  <td>4</td>
  <td>青天决</td>
  <td>28</td>
 </tr>
 <tr>
  <td>5</td>
  <td>赵少邦</td>
  <td>23</td>
 </tr>
 </tbody>
 </table>
 </body>
</html>

注意事项：

A.search(B)可以在A中搜索B的位置，返回B出现的位置
A.split(B)将A以B划分为几部分，并返回数组，相当于分词操作

运行结果如下：

更多搜索功能实现的精彩文章，请点击专题：javascript搜索功能汇总进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于Vue.js实现简单搜索框

在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search 主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo部分的,一个是搜索框部分的. html html很简单,就是引用两个组件. <div id="app"> <logo-pic
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-
Ajax+Servlet+jsp显示搜索效果

一.Ajax简介 Ajax被认为是(Asynchronous JavaScript and XML)的缩写,允许浏览器与服务器通信而无需刷新当前的页面的技术都被叫做Ajax eg:百度搜索.实时地图.etc,在Ajax模型中,数据在客户端与服务器之间独立传输,服务器用不刷新整个页面便可更新数据: 二.Ajax的工作原理图三.Ajax发送和接收相应的方法 1.发送请求相应的方法 1).onreadystatechange事件处理函数:该函数由服务器触发而不是用户,每次readyState属性的改
js实现搜索框关键字智能匹配代码

只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co
js仿QQ邮箱收件人选择与搜索功能

之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下: 页面截图: 主要html代码: <#--左侧--> <div> <label>To:</label> <div id="divtxt" class="mailtxt_div"></div> <input type="hidden" name="messName" id="me
JS百度地图搜索悬浮窗功能

这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的.文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular 效果图: 代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <me
js实现带搜索功能的下拉框实时搜索实时匹配

1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码代码如下: function getSelectT
Vue.js实现多条件筛选、搜索、排序及分页的表格功能

与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条
JavaScript实现前端实时搜索功能

大部分页面都具备搜索功能.而作为前端,我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户,具体实现如下: 1.基本布局: <div class="searcher"> <p class="searcher-main"> <i><img src="img/icon/icon-search-map.png"/></i> <input class="searcher
JS仿百度搜索自动提示框匹配查询功能

1. 添加动态加载css文件不需要引入css css全部在JS动态生成.2. 不需要额外的标签只需要一个input输入框并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码代码如下: <div class=&q

javascript实现简单搜索功能

相关推荐

随机推荐