<!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. UML期末复习题——2.3：UML State Diagram

    第三题  状态图 重要概念: 1.定义:事件.状态和转换: 事件:指一件值得注意的事情的发生. 状态:指对象在事件发生之间某时刻所处的情形. 转换:两个状态之间的关系.它表明当某事件发生时,对象从先前 ...

  2. 二、navicat连接本地数据库以及远程数据库

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

  3. 通过id获取指定元素内容（标签里面的 标签内容获取）

    html页面如下 <tr style="background-color:#fff;"> <td colspan="2" align=left ...

  4. 图解 HTTP 笔记（六）——HTTP 首部

    本章主要讲解了 HTTP 首部的结构,已经首部中各字段的用法. 一.HTTP 报文首部 上图是 HTTP 请求报文的结构. HTTP 请求报文由方法.URI.HTTP 版本.HTTP 首部字段等组成. ...

  5. 【ML】seq2seq原理

    最近要做分享,重温seq2seq原理,这篇文章讲的挺清楚: https://zhuanlan.zhihu.com/p/40920384 https://www.jianshu.com/p/b2b95f ...

  6. mysql删除一条记录

    mysql如何删除一条记录 delete from 表名 where 条件 实例: use db1 delete from tb1 where id = 1;

  7. Run Hyper-V and VirtualBox on the same machine (轉載)

    Run Hyper-V and VirtualBox on the same machine Posted on September 5, 2012 by derek gusoff Recently ...

  8. 【ABAP系列】SAP ABAP BAPI_REQUISITION_CREATE创建采购申请

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP BAPI_RE ...

  9. linux /etc/profile bashrc bash_profile

    文件: /etc/profile  ~/.bashrc  和  ~/.bash_profile 的使用区别: /etc/profile: 全局 环境变量等,在机器重启后执行一次, 用于设置环境变量,更 ...

  10. 机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总

    <Brief History of Machine Learning> 介绍:这是一篇介绍机器学习历史的文章,介绍很全面,从感知机.神经网络.决策树.SVM.Adaboost到随机森林.D ...