JavaScript根據Json數據來做的模糊查詢功能
阿新 • • 發佈：2017-07-19
處理 false 通過 開始 方法 this eve fin 香瓜
類似於百度搜索框的模糊查找功能
需要有有已知數據，實現搜索框輸入字符，然後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數據來做的模糊查詢功能