js小例子（简单模糊匹配输入信息）
该例子实现的是用户输入信息或者字母时可以搜索出来，鼠标点击选择
<!DOCTYPE html>
<html>
<style>
p{
width:200px;
height:2em;
padding:0;
margin:0;
background:#D4D4D4;
display:none;
border-bottom:1px solid black;
}
p:hover{
background:#F7F7F7;
}
div{
height:100px;
width:200px;
overflow-x:hidden;
}
</style>
<body >
<input type="text" id="input" onkeyup="query()" >
<div >
<p onclick="select(this)">js</p>
<p onclick="select(this)">wes</p>
<p onclick="select(this)">che</p>
<p onclick="select(this)">women</p>
<p onclick="select(this)">jswo</p>
</div>
<script>
function select(obj){
var text = document.getElementById("input");
text.value = obj.innerHTML; //实现选择
var p = document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].style.display="none"; //选择完以后隐藏
}
}
function query(){
var p = document.getElementsByTagName("p");
var text = document.getElementById("input");
for(var i=0;i<p.length;i++){
p[i].style.display="none";
if(p[i].innerHTML.match(text.value)){ //匹配输入信息
p[i].style.display="block";
}
}
} </script>
</body>
</html>
js小例子（简单模糊匹配输入信息）的更多相关文章
- DevExpress控件cxGrid实现多列模糊匹配输入的完美解决方案
本方案不需要修改控件源码,是完美解决cxgrid或TcxDBExtLookupComboBox支持多列模糊匹配快速输入的最佳方案!! 转自https://blog.csdn.net/qq5643020 ...
- js小例子（标签页）
运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...
- DevExpress控件TExtLookupComboBox实现多列模糊匹配输入的方法
本方案不需要修改控件源码,是完美解决支持多列模糊匹配快速输入的最佳方案!! 1.把列的Properties属性设置为ExtLookupComboBox. Properties.Incrementa ...
- 每天2个android小例子----简单计算器源代码
通过Android4.0 网格布局GridLayout来实现一个简单的计算器界面布局 package com.android.xiong.gridlayoutTest; import java.mat ...
- activiti 用户手册中 10分钟 小例子 简单代码搭建 及 其中的 各种坑
看mossle的 5.16 用户手册中的 快速起步:10分钟教程 想自己跑一下,虽然官方文档已经写的非常详细了,但是实际操作中还是遇到各种坑,这里记录下来. 首先官网下载最新的 5版本 full G ...
- js小例子之二级联动
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- js小例子（多字溢出，省略号表示）
实现了div中字数较多,显示不下的时候,用省略号来表示,并且可以展开和收起: <html> <head> <meta http-equiv="Content-T ...
- Spring-Boot 中 Redis 的简单使用以及简单模糊匹配删除
https://yulaiz.com/spring-boot-redis-simple/
- c#几个小例子引发的思考
楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...
随机推荐
- codeforces gym 100286 I iSharp (字符串模拟)
题目链接 给定一个字符串.输入是int& a*[]&, b, c*; 输出是 int&&[]* a;int& b;int&* c; 输入格式里逗号后面一 ...
- IOS-JSON & XML解析
XML & JSON 简介 •JSON –作为一种轻量级的数据交换格式,正在逐步取代XML,成为网络数据的通用格式 –基于JavaScript的一个子集 –易读性略差,编码手写难度大,数据量小 ...
- [Android Pro] AIDL进程间传递自定义类型参数
1.创建.aidl 文件 AIDL 语法简单,用来声明接口,其中的方法接收参数和返回值,但是参数和返回值的类型是有约束的,且有些类型是需要 import,另外一些则无需这样做. AIDL 支持的数据类 ...
- Redis基础命令
redis本身不区分命令的大小写,这里一律用小写,以下是部分简单的命令. 1.连接操作命令 quit:关闭连接(connection) auth:简单密码认证 help cmd: 查 ...
- 阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决方法
阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决 ...
- NYOJ题目839合并
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAKgCAIAAADmrHcoAAAgAElEQVR4nO3dO1LsOheG4X8S5AyE2A
- PHP之MVC项目实战(三)
本文主要包括以下内容 标准错误错误处理 http操作 PDO 文件操作 标准错误错误处理 PHP在语法层面上发生的错误 两个过程: 触发阶段(发生一个错误) 处理阶段(如何处理该错误) 触发阶段 系统 ...
- web端跨域调用webapi
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
- Feature hashing相关 - 1
考虑典型的文本分类,一个经典的方法就是 分词,扫描所有特征,建立特征词典 重新扫描所有特征,利用特征词典将特征映射到特征空间编号 得到特征向量 学习参数 w 存储学习参数 w , 存储特征映射 ...
- Tomcat的Session管理机制
>>Session和Cookie请求的过程 Http连接本身是无状态的,即前一次发起的连接跟后一次没有任何关系,是属于两次独立的连接请求,但是互联网访问基本上都是需要有状态的,即服务器需要 ...