<!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. 二、navicat连接本地数据库以及远程数据库

    本地连接 1.打开navicat 2.连接 最后点击确定就连接成功了: 远程数据库 和上面一样.....

  2. Linux中vi编辑器的使用详解

    vi编辑器是Linux系统下标准的编辑器.而且不逊色于其他任何最新的编辑器.可是会用的有多少呢.下面介绍一下vi编辑器的简单用法和部分命令.让你在Linux系统中畅行无阻. 基本上vi可以分为三种状态 ...

  3. [Scikit-learn] Dynamic Bayesian Network - Conditional Random Field

    李航,第十一章,条件随机场 参考:[PGM] Markov Networks 携代码:用 Python 通过马尔可夫随机场(MRF)与 Ising Model 进行二值图降噪[推荐!] CRF:htt ...

  4. [dart学习]第六篇:流程控制语句

    经过前面的基础知识了解学习,我们今天可以进入语句模块啦. dart主要有以下流程控制语句: if-else for循环 while和do-while循环 break和continue switch-c ...

  5. 防止sshd服务被暴力破解

    方法有很多种,这里介绍两种. (1).配置安全的shhd设置 不允许root用户直接登录到系统,添加一个普通用户,必要时再切换到root用户. 修改默认端口号. 不允许密码登录,只能通过密钥登录系统. ...

  6. L1、L2正则化详解

    正则化是一种回归的形式,它将系数估计(coefficient estimate)朝零的方向进行约束.调整或缩小.也就是说,正则化可以在学习过程中降低模型复杂度和不稳定程度,从而避免过拟合的危险. 一. ...

  7. Scrapy五大核心组件工作流程

    一.Scrapy五大核心组件工作流程 1.核心组件 # 引擎(Scrapy) 对整个系统的数据流进行处理, 触发事务(框架核心). # 调度器(Scheduler) 用来接受引擎发过来的请求. 由过滤 ...

  8. Unity爬坑记录-Sprite 相关功能Editor、打包器等无法使用

    找了好久的问题,同一个Unity,但是不同项目,一个没问题,一个出现上面情况.

  9. C++通过Swig跨线程回调Python代码

    C++ 定义 Callback 类. PyThreadStateLock 保证垮线程调用成功: #include <Python/Python.h> class Callback { pu ...

  10. Centos7服务器环境搭建

    1.Apache安装 yum install httpd systemctl start httpd.service #启动 systemctl stop httpd.service#停止 syste ...