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 ...
随机推荐
- caffe编译新问题
我在一台机子上,配置第二个caffe的时候,复制之前的Makefile文件,直接 make all 居然报错了报错如下 ndefined reference to cv::imread(cv::Str ...
- ubuntu14.04 python + opencv 傻瓜式安装解决方案
ubuntu14.04 python + opencv 傻瓜式安装解决方案 ubuntu下使python和opencv来做开发的话,总要花那么点时间来配置环境.我偶然间发现了一种傻瓜式安装办法希望快 ...
- spring和resteasy 的集成方式
spring和resteasy集成,三种主要的方式, 对于和jboss as7的集成不需要做任何工作,jboss默认集成了resteasy,只需要对业务pojo做一些jax-rs的注解标注即可.这里讲 ...
- 优先队列priority_queue的使用
优先队列是队列的一种,不过它可以按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序. 每次的push和pop操作,队列都会动态的调整,以达到我们预期的方式来存储.例如:我们常用的操作就 ...
- PHP的json_encode()函数的引号
PHP的json_encode()函数的引号 (1)数组的索引和值都使用双引号 $a = ["id"=>1,"age"=>12,"name ...
- spring boot--日志、开发和生产环境切换、自定义配置(环境变量)
Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...
- LeetCode OJ--Insert Interval **
https://oj.leetcode.com/problems/insert-interval/ 给出有序的区间来,再插入进去一个,也就是区间合并. 刚开始确立了几个思路,看要插入的区间的start ...
- pycharm上传代码到码云（详细）
如要转载 麻烦请您备注好原文出处!!!!(谢谢合作!) >>首先要去码云注册个账号 提示(尽量使用英文名)创建用户名 使用邮箱登录 >>然后创建库 >填写项目的基础信息 ...
- 关于udo3d双目相机的嵌入式板子系统重装
遇到的问题: 1.下载压缩文件(.rar):在linux下下载一会就会停止 原因:linux下不支持.rar文件的下载,在windows下载即可 2.在windows下解压文件,结果为镜像文件(.im ...
- POJ 1797 Heavy Transportation SPFA变形
原题链接:http://poj.org/problem?id=1797 Heavy Transportation Time Limit: 3000MS Memory Limit: 30000K T ...