JavaScript根据Json数据来做的模糊查询功能
类似于百度搜索框的模糊查找功能
需要有有已知数据，实现搜索框输入字符，然后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> var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oList = document.getElementById('list'); // var newJson = ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓"]; var newJson= ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓"];
//点击事件
oTxt.addEventListener('keyup', function () {
checkCharacter();
var keyWord = oTxt.value;
// var fruitList = searchByIndexOf(keyWord,newJson);
// console.log(fruitList);
var fruitList = searchByRegExp(keyWord, newJson);
renderFruits(fruitList);
showClickDiv();
}, false);
//回车查询
oTxt.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
var keyWord = oTxt.value;
// var fruitList = searchByIndexOf(keyWord,newJson);
var fruitList = searchByRegExp(keyWord, newJson);
renderFruits(fruitList);
}
}, false); function showClickDiv() {
var liList = oList.getElementsByTagName("li");
console.log(liList);
for (var i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
console.log(this.innerHTML);
showClickTextFunction(this.innerHTML);
}
}
} function checkCharacter() {
var etest = oTxt.value;
if (etest == '' || etest == 'null' || etest == undefined) {
oList.style.display = "none";
return false;
} else {
oList.style.display = "block";
}
} 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;
}
//正则匹配
//keyword是输入的值,list是存储数据的数组
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(newJson); //选中后处理数据
var showClickTextFunction = function (a) { //alert(this.innerText + "---" + this.getAttribute("code"));
oTxt.value = a;
// $('#ruleOrgCode').val(this.getAttribute("code"));
oList.style.display = "none";
console.log(oTxt.value);
};
</script>
</body>
</html>
根据这个简单功能的实现，可以进行一些更加复杂的操作
我现在做的一个模糊查询是根据返回的Json数据来和后台的数据进行匹配
当你输入的值得不到匹配的时候，出现的模糊搜索框会消失
具体思路如下
由于是在当前页面内所有的input标签内
所以
1.先获取所有页面的内input标签
2.设定一个全局变量用来存储对应Json内的数据
3.通过for循环遍历所有的input标签
3.1每个input标签触发onclick事件
3.1.1找到当前被点击input标签的id(当前id存储的是Json数据内的键名)
3.1.2设置两个全局变量用来存储Json树当前节点和父级节点
3.1.3通过getNode方法(这个方法之前的随笔里有)找到当前节点和父级节点
3.1.4把当前节点下被模糊查询的数据，也就是一个数组放到第2步设定的全局变量中
3.2每个input标签 触发keyup事件
3.2.1设定一个局部变量，用来存储一个返回值；通过创建ul层的方法得到一个返回值确定是否继续往下执行(ul层用来存储对应的数据)
3.2.2通过if(返回值)，当为真，则继续执行
3.2.3设定一个局部变量获得新创建的ul层的Dom节点，然后给ul层设定样式，比如定位，宽，背景色等等
3.2.4设定一个局部变量用来获得input标签输入的值
3.2.5通过方法获取匹配到的电话号码，返回的是一个数组
3.2.6通过方法输入为空或者匹配到的号码为空则删除电话号码ul层
3.2.7通过方法把电话号码写在li层，然后添加到ul中
3.2.8显示被鼠标点击的电话号码
主要JavaScript代码如下：
fuzzy_Search: function () {
//先找到对应的属性，然后才能继续执行
var newJson = this.jsonB.ModuleList;
//先确定所有的input标签
var inputLabel = document.getElementsByClassName("wrap")[0].getElementsByTagName("input");
//存储当前input的下电话号码的数据
var currentData;
//遍历所有的input
for (var i = 0; i < inputLabel.length; i++) {
inputLabel[i].onclick = function () {
//找到了当前被点击input标签的id
var backLabel = show_element(event);
console.log(backLabel);
//设置Json树当前节点的变量名
node = null;
//设置Json树父级节点的变量名
parentNode = null;
//根据获取的id名查找所在当前节点以及父节点的方法
var obj = getNode(newJson, backLabel);
console.log(obj);;
//typeData为被查询数据所在数组对应的键名
currentData = obj.node.TypeData;
}
inputLabel[i].addEventListener('keyup', function () {
//创建ul层的函数，通过返回值确定是否继续往下执行
var flag = createSearchUl(currentData, this);
if (flag) {
//获取创建好的ul层的DOM节点
var oList = document.getElementById("createUl");
//设置ul层的属性
oList.setAttribute('style', 'position: absolute;left:180px;top:50px;z-index:100;background:#fff;list-style:none;width:71%;cursor:pointer');
console.log("找到了Ul", oList);
//在input标签中获取输入的值
var keyWord = this.value;
//通过searchByRegExp方法获取匹配到的电话号码，返回的是一个数组
var dataList = searchByRegExp(keyWord, currentData);
//输入为空或者匹配到的号码为空则删除电话号码ul层
checkCharacter(this, oList, dataList);
//把电话号码写在li层，然后添加到ul中
renderData(dataList, oList);
//显示被鼠标点击的电话号码
showClickDiv(oList, this);
}
}, false);
}
//创建一个ul,然后在input标签对应的父级中添加入ul
function createSearchUl(CrData, thisLabel) {
if (CrData.length > 0) {
if (!(thisLabel.value == '' || thisLabel.value == 'null' || thisLabel.value == undefined)) {
//找到input标签的父级
var searchDiv = thisLabel.parentNode;
//给他的父级做一个相对定位
searchDiv.setAttribute('style', 'position: relative');
//建立一个装电话号码的ul
var iUl = document.createElement("ul");
//把ul添加到父级中
searchDiv.appendChild(iUl);
//给ul建立一个id
searchDiv.getElementsByTagName("ul")[0].setAttribute('id', 'createUl');
return true;
} else {
var UlS = thisLabel.parentNode.getElementsByTagName("ul");
//console.log("当前input标签的父级",thisInput.parentNode);
for (var i = UlS.length - 1; i >= 0; i--) {
UlS[0].parentNode.removeChild(UlS[i]);
}
return false;
}
}
}
//找到被点击元素id的方法
function show_element(e) {
if (!e) {
var e = window.event;
}
//获取事件点击元素
var targ = e.target;
//获取元素名称
var tname = targ.id;
return tname;
}
//根据获取的id名查找所在当前节点以及父节点
function getNode(json, nodeId) {
//1.第一层 root 深度遍历整个JSON
for (var i = 0; i < json.length; i++) {
console.log(json[i].Content);
for (var j = 0; j < json[i].Content.length; j++) {
if (node) {
break;
}
var obj = json[i].Content[j];
//没有就下一个
if (!obj || !obj.FieldName) {
continue;
}
//2.有节点就开始找，一直递归下去
if (obj.FieldName == nodeId) {
//找到了与nodeId匹配的节点，结束递归
node = obj;
break;
} else {
//3.如果有子节点就开始找
if (obj.TypeData1) {
//4.递归前，记录当前节点，作为parent 父亲
parentNode = obj;
//递归往下找
getNode(obj.TypeData1, nodeId);
} else {
//跳出当前递归，返回上层递归
continue;
}
}
}
}
//5.如果木有找到父节点，置为null，因为没有父亲
if (!node) {
parentNode = null;
}
//6.返回结果obj
return {
//父级节点
parentNode: parentNode,
//当前节点
node: node
};
}
//显示被鼠标点击的电话号码
function showClickDiv(oList,thisInput) {
var liList = oList.getElementsByTagName("li");
console.log(liList);
for (var i = 0; i < liList.length; i++) {
liList[i].onclick = function () {
console.log(this.innerHTML);
//三个实参;1.当前li标签内的内容,2.输入的值;3.当前的ul层
showClickTextFunction(this.innerHTML, thisInput, oList);
}
}
}
//输入为空或者匹配到的号码为空则删除电话号码ul层
function checkCharacter(thisInput, oList, dataList) {
//获取input标签输入的值
var etest = thisInput.value;
//为空则删除创建的ul层
if (etest == '' || etest == 'null' || etest == undefined) {
oList.parentNode.removeChild(oList);
return false;
}//当再次匹配号码为空，则删除所有的ul层
else if (dataList <= 0) {
var UlS = thisInput.parentNode.getElementsByTagName("ul");
//console.log("当前input标签的父级",thisInput.parentNode);
for (var i = UlS.length-1; i >= 0; i--) {
oList.parentNode.removeChild(UlS[i]);
}
}
}
//把电话号码写在li层，然后添加到ul中
function renderData(list, oList) {
//传进来的list不是数组，就跳出该方法
if (!(list instanceof Array)) {
return;
}
//设置ul的内容为空
oList.innerHTML = '';
//获取存电话号码数组的长度
var len = list.length;
//定义一个变量用来创建li标签
var item = null;
//for循环遍历存电话号码的数组，把号码写入创建的li标签中，再添加到ul中
for (var i = 0; i < len; i++) {
item = document.createElement('li');
//为创建的li标签添加class
item.setAttribute("class", "newLi"+i);
item.innerHTML = list[i];
oList.appendChild(item);
}
}
//正则匹配
//keyword是输入的值,list是存储数据的数组
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++) {
//匹配到一个电话号码就存入数组中
if (list[i].phone.match(reg)) {
arr.push(list[i].phone);
}
}
return arr;
}
//选中后处理数据
function showClickTextFunction(a, b, oList) {
b.value = a;
oList.style.display = "none";
}
}
JavaScript根据Json数据来做的模糊查询功能的更多相关文章
- 微信小程序 WXS实现json数据需要做过滤转义（filter）
前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...
- 第一百二十七节，JavaScript，JSON数据类型转换，数据转换成字符串，字符串转换成数据
第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...
- javascript中 json数据的解析与序列化
首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...
- JavaScript如何处理JSON数据
JSON (Javescript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...
- 彻底理解使用JavaScript 将Json数据导出CSV文件
前言 将数据报表导出,是web数据报告展示常用的附带功能.通常这种功能都是用后端开发人员编写的.今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件. 原理 首先在本地用Excel ...
- Android解析中国天气接口JSon数据，应用于天气查询！
android解析Json数据是比较常见的一种操作.也是客户端和服务器进行数据交互的桥梁.下面就来看一看在android中解析JSon数据的方法吧. 首先要想获得Json数据,就必须访问相关的网络接口 ...
- 可以执行全文搜索的原因 Elasticsearch full-text search Kibana RESTful API with JSON over HTTP elasticsearch_action es 模糊查询
https://www.elastic.co/guide/en/elasticsearch/guide/current/getting-started.html Elasticsearch is a ...
- elasticsearch 7.x 如何满足mysql中的模糊查询功能（like）
业务场景:筛选项原功能是用mysql左模糊进行过滤查询,现业务要用es,怎么样才能满足原功能,又不损性能. elasticsearch中有关于模糊查询的操作:wildcard 文档:https://b ...
- javaScript 对json数据按key值排序
var ajson= { "result":[ { "cid":1, "name":"aaa", "price ...
随机推荐
- Eclipse + Jersey 发布RESTful WebService（一）了解Maven和Jersey，创建一个WS项目（成功！）
一.下文中需要的资源地址汇总 Maven Apache Maven网站 http://maven.apache.org/ Maven下载地址: http://maven.apache.org/down ...
- Linux内存管理【转】
转自:http://www.cnblogs.com/wuchanming/p/4360264.html 转载:http://www.kerneltravel.net/journal/v/mem.htm ...
- Objective_C与Swift混编遇到的坑(一)
swift推出已经很长一段时间了,前段时间突然想尝试一些简单的类用swift编写于是便开始了混编的路程. 1.在oc代码里引用swift类:找了很多资料需要添加头文件格式为 #import " ...
- SQL盲注工具BBQSQL
SQL盲注工具BBQSQL SQL注入是将SQL命令插入到表单.域名或者页面请求的内容中.在进行注入的时候,渗透测试人员可以根据网站反馈的信息,判断注入操作的结果,以决定后续操作.如果网站不反馈具 ...
- 空扫描Idle Scanning
空扫描Idle Scanning 空扫描Idle Scanning是一种借助第三方实施的端口扫描技术,可以很好的隐蔽扫描主机本身.它的实现基于以下两个TCP工作机制. (1)在TCP三次握手阶 ...
- Wireshark如何单独导出包的列信息
Wireshark如何单独导出包的列信息 Wireshark提供了丰富的数据包导出功能.用户可以将数据包按照需要导出为各种格式.这些格式文件包含了包的各种信息.但是很多时候,用户只需要获取包的特定 ...
- 利用例子来理解spring的面向切面编程
最近学习了spring的面向切面编程,在网上看到猴子偷桃的例子,觉得这种方式学习比书本上讲解有趣多了,也便于理解.现在就来基于猴子偷桃写个基本的例子. maven工程:
- luogu P1140 相似基因
题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了4种核苷酸,简记作A,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类基因工作组的任务中,生物学家研究 ...
- AtCoder - 3913 XOR Tree
Problem Statement You are given a tree with N vertices. The vertices are numbered 0 through N−1, and ...
- Java并发容器，底层原理深入分析
ConcurrentHashMap ConcurrentHashMap底层具体实现 JDK 1.7底层实现 将数据分为一段一段的存储,然后给每一段数据配一把锁, 当一个线程占用锁访问其中一个段数据时, ...