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 ...
随机推荐
- 最短Hamilton路径-状压dp解法
最短Hamilton路径 时间限制: 2 Sec 内存限制: 128 MB 题目描述 给定一张 n(n≤20) 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamil ...
- Mondriaan's Dream（poj 2411）
题意:在n*m的方格里铺1*2的骨牌,有多少种方案 /* 第一次做插头DP,感觉和状压差不多. 这道题是利用上一行的状态来更新下一行的状态. 1代表上一行这个位置填了一个竖的(即本行可以填): 0代表 ...
- Linux System Programming 学习笔记(三) 标准缓冲I/O
1. partial block operations are inefficient. The operating system has to “fix up” your I/O by ensuri ...
- 【kindeditor】kindeditor的使用
官网:http://kindeditor.net/demo.php 效果:
- Git开发必知必会
比如说你现在准备写一个自己的视频资源网站,在创业初期,你的项目暂时还是测试阶段,没有用户的时候,你可能只有一个人在开发,你每天都以写的内容和时间作为文件名的命名,这样其实是可以满足你对版本控制的基本需 ...
- 解决npm 的 shasum check failed for错误
使用npm安装一些包失败,类似如下报错情况: C:\Program Files\nodejs>npm update npm npm ERR! Windows_NT 10.0.14393 np ...
- AC日记——Pupils Redistribution Codeforces 779a
A. Pupils Redistribution time limit per test 1 second memory limit per test 256 megabytes input stan ...
- (1)TensorFlow 概要
TensorFlow:翻译成中文 张量流 计算图:又被称为有向图.数据流图 数据流图用结点和线的有向图来描述数学计算,节点一般用来表示施加的数学操作,也可以用来数据输入起点.输出终点,或者读取写入持久 ...
- linux time
uint32_t midtime; static struct timeval startstart,midmid; while (ros::ok()) { gettimeofday(&sta ...
- 几点iOS开发技巧
转自I'm Allen的博客 原文:iOS Programming Architecture and Design Guidelines 原文来自破船的分享 原文作者是开发界中知晓度相当高 ...