<!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. Facebook币Libra学习-2.交易生命周期

    交易生命周期 为了更加深入的理解Libra的交易生命周期,我们将跟随一个交易的全过程,从其被提交到Libra validator始,直至其被添加到区块链上止.我们将“放大”来看每个validator逻 ...

  2. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  3. java使用jconsole查看java程序运行（jmx原理）

    在JVM启动参数上加上     java -Dcom.sun.management.jmxremote.port=8999     -Dcom.sun.management.jmxremote.aut ...

  4. cron表达式的用法 【比较全面靠谱】

    转: cron表达式的用法 cron表达式通过特定的规则指定时间,用于定时任务,本文简单记录它的部分语法和实例,并不完全,能覆盖日常大部分需求. 1. 整体结构 cron表达式是一个字符串,分为6或7 ...

  5. 15 Flutter仿京东商城项目 搜索页面布局

    Search.dart import 'package:flutter/material.dart'; import 'package:flutter_jdshop/services/ScreenAd ...

  6. Linux命令之ntpdate、hwclock

    ntpdate用于同步系统时间.hwclock用于同步硬件时间. (1).ntpdate ntpdate [选项] [时间服务器] 一般直接ntpdate [时间服务器] 常用的时间服务器:ntp[1 ...

  7. MVP模式的学习

    简书: http://www.jianshu.com/p/f6fd9656f619 Github: https://github.com/tsaievan/YFMVPDemo

  8. css3 Grid栅格系统

    Grid 栅格系统的使用 定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid- ...

  9. Debezium系列随笔

    0.Debezium简介 1.Run Debezium for Mysql in docker step by step 2.Run Debezium for SQLServer in docker ...

  10. TOMCAT 安装教程 & 配置CGI & c语言exe

    TOMCAT安装 参考原文网址:百度经验http://jingyan.baidu.com/article/154b4631aad2bb28ca8f4191.html 1.下载安装JDK 网址:http ...