前端js实现本地模糊搜索
生活随笔
收集整理的這篇文章主要介紹了
前端js实现本地模糊搜索
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很多時候我們做模糊查詢是傳關鍵字給后臺請求后臺接口，但是有時候一些輕量級的列表前端來做可以減少ajax請求，在一定程度上提高用戶體驗。
例如搜索課程名稱，首先我們將課程名稱json數據存在本地，然后通過將關鍵字與目標檢索數組進行匹配，將符合條件的對象返回并渲染顯示在前端，這樣就達到了我們本地模糊查詢的目的。
模糊查詢的規則：
本例是首字母相同，并且包含搜索的所有關鍵字，例如輸入“計科”，返回計算機科學與技術。 /**檢查一個字符串是否包含在另一個字符串里,并且首字符相同* i:計算機科學與技術* j:計科* 返回true* */function checkStrContain(i, j) {if(!i || !j){return false;}if(i.charAt(0) != j.charAt(0)){return false;}i = i.substr(1,i.length-1);j = j.substr(1,j.length-1);var a;var b;if (i.length > j.length) {a = i;b = j;} else {a = j;b = i;}var count = 0;for (var bi = 0; bi < b.length; bi++) {var bArr = b.split("");if (a.indexOf(bArr[bi]) != -1) {count++;} else {break;}}if (b.length == count) {return true;} else {return false;}}
根據搜索關鍵字返回符合條件的數組：
/*** 根據字符串模糊搜索返回符合條件的數據* name 搜索字符串* array 檢索json數組* length 匹配結果最大長度*/function getArrayByName(name,array,length){if(array.length < 1){return;}var result = [];for (var key in array) {if (checkStrContain(array[key].name,name) && result.length<length) {result.push(array[key])}}return result}按下鍵盤時進行檢索，查找符合條件的數據，選擇下拉選項后回填輸入框：
$(function(){/**按下鍵盤時搜索*/$("body").undelegate("input", "keyup").delegate("input", "keyup", function() {var name = $(this).val().replace(/\s+/g, "");if(name.length>0){var resultArray = getArrayByName(name,jsonArr,6);if(resultArray.length<1){$(this).next("ul").hide();}else{var html = "";for(var i=0;i<resultArray.length;i++){html += "<li>"+resultArray[i].name+"</li>";}$(this).next("ul").html(html).show();}}})/**下拉列表展開時點擊li的事件,為輸入框賦值*/$(".input-search").on("click","ul li",function(){$(this).parent("ul").siblings("input").val($(this).text());$(this).parent("ul").hide();});})完整代碼(包含樣式)：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}.input-search{position: relative;margin: 100px auto;width: 200px;}input{width: 200px;height: 30px;padding-left: 10px;padding-right: 10px;background-color: #ffffff;border: solid 1px #e5e5e5;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;outline: none;-webkit-appearance:none;appearance: none;}ul{display: none;position: absolute;top: 29px;width: 100%;border: solid 1px #62a6da;max-height: 340px;overflow-y: auto;z-index: 1;font-size: 0;}ul li{position: relative;padding-left: 10px;width: 100%;height: 34px;line-height: 34px;font-size: 14px;color: #454545;text-align: left;background-color: #fff;cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}ul li:hover{color: #fff;background-color: #1c9dff;}</style> </head> <body><div class="input-search"><input type="text" placeholder="請輸入課程名稱"><ul></ul></div><script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script><script>$(function(){/**按下鍵盤時搜索*/$("body").undelegate("input", "keyup").delegate("input", "keyup", function() {var name = $(this).val().replace(/\s+/g, "");if(name.length>0){var resultArray = getArrayByName(name,jsonArr,6);if(resultArray.length<1){$(this).next("ul").hide();}else{var html = "";for(var i=0;i<resultArray.length;i++){html += "<li>"+resultArray[i].name+"</li>";}$(this).next("ul").html(html).show();}}})/**下拉列表展開時點擊li的事件,為輸入框賦值*/$(".input-search").on("click","ul li",function(){$(this).parent("ul").siblings("input").val($(this).text());$(this).parent("ul").hide();});})var jsonArr = [{"name":"計算機組成原理"},{"name":"計算機網絡"},{"name":"數據結構"},{"name":"網頁程序設計"},{"name":"嵌入式開發"},{"name":"高等數學"},{"name":"計算機應用技術"},{"name":"計算機科學與技術"}]/*** 根據字符串模糊搜索返回符合條件的數據* name 搜索字符串* array 檢索json數組* length 匹配結果最大長度*/function getArrayByName(name,array,length){if(array.length < 1){return;}var result = [];for (var key in array) {if (checkStrContain(array[key].name,name) && result.length<length) {result.push(array[key])}}return result}/**檢查一個字符串是否包含在另一個字符串里,并且首字符相同* i:計算機科學與技術* j:計科* 返回true* */function checkStrContain(i, j) {if(!i || !j){return false;}if(i.charAt(0) != j.charAt(0)){return false;}i = i.substr(1,i.length-1);j = j.substr(1,j.length-1);var a;var b;if (i.length > j.length) {a = i;b = j;} else {a = j;b = i;}var count = 0;for (var bi = 0; bi < b.length; bi++) {var bArr = b.split("");if (a.indexOf(bArr[bi]) != -1) {count++;} else {break;}}if (b.length == count) {return true;} else {return false;}} </script> </body> </html>原文作者技術博客：https://www.jianshu.com/u/ac4daaeecdfe
總結
以上是生活随笔為你收集整理的前端js实现本地模糊搜索的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 运维工程师模拟面试题
- 下一篇： c语言hid,HIDAPI首页、文档和下