<!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. vue 调用微信支付方法

    pay(){ let data ={ order_id:this.order_id, wechatpay_type:this.wechatpay_type, merchant_id:localStor ...

  2. 003-jdk-数据结构-HashMap、HashTable、ConcurrentHashMap、TreeMap、LinkedHashMap、Set

    一.Map概述 Map:“键值”对映射的抽象接口.该映射不包括重复的键,一个键对应一个值. 1.1.HashTable[不常用] 基于“拉链法”实现的散列表. 底层数组+链表实现,无论key还是val ...

  3. 绿色版plsql安装和安装包

    转: 绿色版plsql安装和安装包 2018年08月07日 19:53:15 YoungLee16 阅读数 4890   最近在使用数据库的时候,或多或少的会出现一些问题,下面总结下如何安装ORACL ...

  4. Qt编写数据可视化大屏界面电子看板5-恢复布局

    一.前言 恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用,很多时候不小心把现有布局拖动乱了,(当然如果不想布局被拖动改动,可以修改配置文件中的MoveEnable参数来控制,默认为真表 ...

  5. Python之操作RabbitMQ

    RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  6. swift 第四课 随意 设置button 图片和文字 位置

    项目中经常遇到按钮改变文字和图片位置的情况,所以尝试写一个 button 的分类: 参照连接 http://blog.csdn.net/dfqin/article/details/37813591 i ...

  7. EMC DS300B光纤交换机扩展光口license

    一.通过EMC指定的网站激活license 激活license,生成激活码需要三个信息: 1.交换机WWN号:可在交换机铭牌上查看:(16位) 2.SN号码:AQA00***9*6(11位) 3.ke ...

  8. 【Python】机器学习之单变量线性回归 利用批量梯度下降找到合适的参数值

    [Python]机器学习之单变量线性回归 利用批量梯度下降找到合适的参数值 本题目来自吴恩达机器学习视频. 题目: 你是一个餐厅的老板,你想在其他城市开分店,所以你得到了一些数据(数据在本文最下方), ...

  9. C# volatile 摘录

    C# 参考 volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时间呈现的都是最新 ...

  10. jquery中 $.expr使用实例介绍

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