很多时候我们做模糊查询是传关键字给后台请求后台接口，但是有时候一些轻量级的列表前端来做可以减少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="///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>
原文作者技术博客：/u/ac4daaeecdfe
