js模糊查询案例
<!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模糊查询案例的更多相关文章
- js—模糊查询
首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...
- js模糊查询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 编写简易的JS输入框模糊查询匹配(附有源码和demo)
前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...
- js前端实现模糊查询
对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...
- js实现模糊查询
1.简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现. 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询. 前端直接使用字符串的indexOf()方法或者正则表达 ...
- 前端js模糊搜索(模糊查询)
1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;&q ...
- MVC案例之模糊查询与删除
查询操作: Servlet //1. 调用 CustomerDAO 的 getAll() 得到 Customer 的集合 List<Customer> customers ...
- 3.QT数据库综合案例,模糊查询等操作
1 新建一个项目: Database01.pro SOURCES += \ main.cpp \ Contact.cpp QT += gui widgets sql CONFIG += C++1 ...
- js实现下拉框模糊查询
keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...
随机推荐
- centos7 搭建FTP
通过yum安装vsftpd yum install -y vsftpd 修改vsftpd的配置文件 vim /etc/vsftpd/vsftpd.conf 修改配置文件如下: 1.不允许匿名访问 an ...
- SqlServer2008数据库的备份与还原
1.先是备份数据 1.1.登录sql server management studio 1.2.选中需要备份数据库,右击鼠标,如下图: 1.3.点击备份之后,如下图; 2.数据还原准备 ps: 在开始 ...
- 【leetcode】500_Keyboard Row
problem 500. Keyboard Row 题意:判断给出的某个单词是否可以使用键盘上的某一行字母type得到: 注意大小写的转换: solution1: 使用set保存三行字符,查看每个字符 ...
- iOS-意见反馈UITextView的使用+不能输入字符输入
@interface DMFeedbackViewController ()<UITextViewDelegate,UIAlertViewDelegate>@property (nonat ...
- webdriervAPI(警告框处理)
from selenium import webdriver driver = webdriver.Chorme() driver.get("http://www.baidu.co ...
- python-Web-flask-视图内容和模板
2 视图内容和模板: 基本使用 #设置cookie值 @app.route('/set_cookie') def set_cookie(): response = make_response(&quo ...
- OPC 数据交互环境配置
本文源自ioufev先生的博客<OPC和DCOM配置>(https://www.cnblogs.com/ioufev/p/9365919.html)及「geekc」先生的<OPC工作 ...
- Git常用命令速查表,新手必备版本控制
Git 跟 SVN 一样,都是用于管理代码的版本控制工具.无论在项目中,我们负责哪一块,只要需要编写代码,就必须熟悉Git(依公司要求而定). 当然,用的越熟练,处理的项目越顺利,离出任CTO.迎娶白 ...
- [学习笔记] Hibernate 4.3.5 下载与安装
下载 http://hibernate.org/orm/releases/4.3/ https://sourceforge.net/projects/hibernate/files/hibernate ...
- web项目获取资源文件
首页 博客 学院 CSDN学院 下载 论坛 APP CSDN 问答 商城 活动 VIP会员 专题 招聘 ITeye GitChat GitChat 图文课 写博客 消息 1 评论 关注 点赞 回答 系 ...