在大多数情况下，我们进行模糊查询是向后台请求的后台接口传递关键字，但有时在轻量级列表前端这样做可以减少ajax请求，并在一定程度上提高用户体验。
例如，在搜索课程名称时，首先本地存在课程名称的json数据，使关键字与目标搜索数组相匹配，然后将符合条件的对象返回到前端进行渲染和显示，从而达到本地模糊查询的目的
模糊查询的规则：
此示例具有相同的首字母，并包含搜索的所有关键字。 例如，键入“仪表”返回计算机科学和技术。
/**检查一个字符串是否包含在另一个字符串中，开头相同的* i:计算机科学和技术* j:仪表*为true * */function checkstrcontain (I，j ) ) i ||！ j ({返回假； (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.lengthj.length ) { a=i； b=j； } else { a=j； b=i； } var count=0； for(varbi=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匹配结果最大长度*/functiongetarraybyname(name，array，length ) id for(varkeyinArray ) if(checkstrcontain ) Array(key ).name，name ) result.length length (result.push ) Array )。
$(function ) ()/**键盘时)/$ (body ) ).undelegate )、(keyup )、(delegate )、(input )、(keyup )。 if(resultArray.Length1) $(this ).next ) ' ul ).hide )； }else{ var html=' '； for(varI=0； iresultArray.length； I ) { html=' Li ' result array [ 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