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 ...
随机推荐
- HDU 4793 Collision (解二元一次方程) -2013 ICPC长沙赛区现场赛
题目链接 题目大意 :有一个圆硬币半径为r,初始位置为x,y,速度矢量为vx,vy,有一个圆形区域(圆心在原点)半径为R,还有一个圆盘(圆心在原点)半径为Rm (Rm < R),圆盘固定不动,硬 ...
- 回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证。
问题补充: “/Source”应用程序中的服务器错误. 回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或 ...
- 25个增强iOS应用程序性能的提示和技巧(高级篇)(2)
25个增强iOS应用程序性能的提示和技巧(高级篇)(2) 2013-04-16 14:56 破船之家 beyondvincent 字号:T | T 在开发iOS应用程序时,让程序具有良好的性能是非常关 ...
- August 7th 2016, Week 33rd Sunday
Knowing yourself is the height of wisdom. 了解自己就是大智慧. Two-day holiday, even I didn't have enought tim ...
- java web开发环境配置
一:安装jdk http://www.java.com/zh_TW/ 二:下载tomcat,这里是zip版.http://tomcat.apache.org/download-70.cgi 三:在 ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- 获取当前IP地址，跳转到对应城市网站。
index.php文件 1,通过获取当前IP地址, 2,调用新浪AIP,获取到当前城市. 3,将中文转换为拼音后跳转. <?php include './pinyin.php'; //获取当前i ...
- hdu 4050 2011北京赛区网络赛K 概率dp ***
题目:给出1-n连续的方格,从0开始,每一个格子有4个状态,左右脚交替,向右跳,而且每一步的步长必须在给定的区间之内.当跳出n个格子或者没有格子可以跳的时候就结束了,求出游戏的期望步数 0:表示不能到 ...
- hdu 4389 数位dp
求区间内满足x%fx==0的数的个数,fx为该数各个位数上的数字之和Sample Input21 1011 20 Sample OutputCase 1: 10Case 2: 3 大小不是你想开,想开 ...
- FreeSWITCH 体系配置结构
转自:http://www.cnblogs.com/logo-fox/archive/2013/12/09/3465440.html FreeSWITCH总体结构: FreeSWITCH 由一个稳定的 ...