<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>模糊查询</title>

<style>

*{

list-style: none;

padding:0;

margin:0;

}

div{

text-align: center;

padding-top:20px;

}

ul{

padding-top:20px;

width:30%;

margin:0 50% 0 35%;

}

li{

padding:3px;

border:1px solid silver;

box-shadow: 1px 1px;

}

</style>

</head>

<body>

<div>

<input type="text" id="txt">

<button type="button" id="btn">search</button>

<ul id="list">

</ul>

</div>

<script src="main.js"></script>

</body>

</html>

===========main.js代码===========

var oTxt = document.getElementById('txt');

var oBtn = document.getElementById('btn');

var oList = document.getElementById('list');

var fruits = ["桃子","苹果","梨子","香蕉","香瓜","葡萄","柠檬","橘子","草莓"];

//点击事件

oBtn.addEventListener('click', function(){

var keyWord = oTxt.value;

// var fruitList = searchByIndexOf(keyWord,fruits);

console.log(fruitList);

var fruitList = searchByRegExp(keyWord, fruits);

renderFruits(fruitList);

}, false);

//回车查询

oTxt.addEventListener('keydown', function(e){

if(e.keyCode == 13){

var keyWord = oTxt.value;

// var fruitList = searchByIndexOf(keyWord,fruits);

var fruitList = searchByRegExp(keyWord, fruits);

renderFruits(fruitList);

}

}, false);

function renderFruits(list){

if(!(list instanceof Array)){

return ;

}

oList.innerHTML = '';

var len = list.length;

var item = null;

for(var i=0;i<len;i++){

item = document.createElement('li');

item.innerHTML = list[i];

oList.appendChild(item);

}

}

//模糊查询1:利用字符串的indexOf方法

function searchByIndexOf(keyWord, list){

if(!(list instanceof Array)){

return ;

}

var len = list.length;

var arr = [];

for(var i=0;i<len;i++){

//如果字符串中不包含目标字符会返回-1

if(list[i].indexOf(keyWord)>=0){

arr.push(list[i]);

}

}

return arr;

}

//正则匹配

function searchByRegExp(keyWord, list){

if(!(list instanceof Array)){

return ;

}

var len = list.length;

var arr = [];

var reg = new RegExp(keyWord);

for(var i=0;i<len;i++){

//如果字符串中不包含目标字符会返回-1

if(list[i].match(reg)){

arr.push(list[i]);

}

}

return arr;

}

renderFruits(fruits);

js模糊查询案例的更多相关文章

  1. js—模糊查询

    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...

  2. js模糊查询

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 编写简易的JS输入框模糊查询匹配（附有源码和demo）

    前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...

  4. js前端实现模糊查询

    对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...

  5. js实现模糊查询

    1.简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现. 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询. 前端直接使用字符串的indexOf()方法或者正则表达 ...

  6. 前端js模糊搜索（模糊查询）

    1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;&q ...

  7. MVC案例之模糊查询与删除

    查询操作: Servlet         //1. 调用 CustomerDAO 的 getAll() 得到 Customer 的集合 List<Customer> customers ...

  8. 3.QT数据库综合案例，模糊查询等操作

     1 新建一个项目: Database01.pro SOURCES += \ main.cpp \ Contact.cpp QT += gui widgets sql CONFIG += C++1 ...

  9. js实现下拉框模糊查询

    keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...

随机推荐

  1. SQL-W3School-高级：SQL AUTO INCREMENT 字段

    ylbtech-SQL-W3School-高级:SQL AUTO INCREMENT 字段 1.返回顶部 1. Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INC ...

  2. Rect和RectF函数

    1.是否包含点,矩形 判断是否包含某个点 boolean contains(int x,int y)  函数用于判断某个点是否在当前矩形中,如果在,则返回true ,不在则false 2.判断是否包含 ...

  3. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_22-页面静态化-静态化测试-静态化程序测试

    测试service内些的静态化的方法 先新建一个测试类 模板的id 放到下拉的静态数据里面 这样这条数据 就是用用的轮播图005这个模板 把这条数据静态化 进入到断点里面.先获取数据模型 获取模板时 ...

  4. [Graphics] UIColor created with component values far outside the expected range, Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.

    用了别人的代码,一直总有一个报错,一开始没注意,最近项目快完期了,得处理下警告之类的东西, 后面发现之前那个大神代码是这样写的 [SVProgressHUD setBackgroundColor:[U ...

  5. Pytorch Tensor, Variable, 自动求导

    2018.4.25,Facebook 推出了 PyTorch 0.4.0 版本,在该版本及之后的版本中,torch.autograd.Variable 和 torch.Tensor 同属一类.更确切地 ...

  6. 【极简版】OpenGL 超级宝典（第五版）环境配置 VS2010

    事先声明:该教程仅适用于VS2010环境下超级宝典第五版的配置 第一步:下载示例代码和环境包: 链接:https://pan.baidu.com/s/1llRRQ8ymBgMGuXp5M50pJw 提 ...

  7. java中序列化的作用

    一  什么叫序列化 通俗点讲:它是处理对象流的一种机制,即可以很方便的保存内存中java对象的状态,同时也为了方便传输. 二 序列化有什么作用 1.方便传输,速度快,还很安全,被调用方序列化,调用方反 ...

  8. spring效验

    相关依赖 如果开发普通 Java 程序的的话,你需要可能需要像下面这样依赖: <dependency> <groupId>org.hibernate.validator< ...

  9. 45.简单邮件传输协议 SMTP

    一丶简单邮件传输协议 简单邮件传输协议 简单邮件传输协议 SMTP smtplib 模块:(在 Python3版本中,可以通过 SMTP协议发送邮件的模块常为 smtplib, 并且这个模块属于内置模 ...

  10. windows 修改Administrator管理员账户名

      用[Win+R]组合键命令打开[运行]界面,输入[gpedit.msc],按[回车键]或[鼠标左键]单击[确定]按钮:   在弹出的[本地组策略编辑器]对话框中,依次[鼠标左键]点击打开:[计算机 ...