<!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. centos7 搭建FTP

    通过yum安装vsftpd yum install -y vsftpd 修改vsftpd的配置文件 vim /etc/vsftpd/vsftpd.conf 修改配置文件如下: 1.不允许匿名访问 an ...

  2. SqlServer2008数据库的备份与还原

    1.先是备份数据 1.1.登录sql server management studio 1.2.选中需要备份数据库,右击鼠标,如下图: 1.3.点击备份之后,如下图; 2.数据还原准备 ps: 在开始 ...

  3. 【leetcode】500_Keyboard Row

    problem 500. Keyboard Row 题意:判断给出的某个单词是否可以使用键盘上的某一行字母type得到: 注意大小写的转换: solution1: 使用set保存三行字符,查看每个字符 ...

  4. iOS-意见反馈UITextView的使用+不能输入字符输入

    @interface DMFeedbackViewController ()<UITextViewDelegate,UIAlertViewDelegate>@property (nonat ...

  5. webdriervAPI(警告框处理)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  6. python-Web-flask-视图内容和模板

    2 视图内容和模板: 基本使用 #设置cookie值 @app.route('/set_cookie') def set_cookie(): response = make_response(&quo ...

  7. OPC 数据交互环境配置

    本文源自ioufev先生的博客<OPC和DCOM配置>(https://www.cnblogs.com/ioufev/p/9365919.html)及「geekc」先生的<OPC工作 ...

  8. Git常用命令速查表，新手必备版本控制

    Git 跟 SVN 一样,都是用于管理代码的版本控制工具.无论在项目中,我们负责哪一块,只要需要编写代码,就必须熟悉Git(依公司要求而定). 当然,用的越熟练,处理的项目越顺利,离出任CTO.迎娶白 ...

  9. [学习笔记] Hibernate 4.3.5 下载与安装

    下载 http://hibernate.org/orm/releases/4.3/ https://sourceforge.net/projects/hibernate/files/hibernate ...

  10. web项目获取资源文件

    首页 博客 学院 CSDN学院 下载 论坛 APP CSDN 问答 商城 活动 VIP会员 专题 招聘 ITeye GitChat GitChat 图文课 写博客 消息 1 评论 关注 点赞 回答 系 ...