前端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实现本地模糊搜索相关推荐

html模糊搜索怎么实现,前端js实现本地模糊搜索
很多时候我们做模糊查询是传关键字给后台请求后台接口,但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验. 例如搜索课程名称,首先我们将课程名称json数据存在本地,然后通 ...
前端js下载本地模板
做一件事,要认真,细心,耐心.记忆开始之初,父母,老师都开始教导的真理,现在工作了,这教导还在,但是这些事情却还是没有做好.昨天,老大审查代码,发现之前的写的下载模板过于复杂,而且在ie环境下还不能执 ...
前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...
pc前端js调起电脑本地应用程序(需要客户端配合自定义URL Protocol 协议 )
由于做项目需要实现如题的一个功能,所以搜寻了相关资料. CSDN博文自定义URL Protocol(客户端的配置):自定义URL Protocol 协议_chinahaerbin的博客-CSDN博客 ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
JS获取本地IP显示隐藏IP
JS获取本地IP&显示隐藏IP 前言 JS获取本地IP方法遇到问题解决方案火狐(FireFox)删除隐藏IP 谷歌(Chrome)删除隐藏IP 前言这段时间一直在搞前端,我一个软件开发 ...
前后端交互，密码加密，RSA 实现前端 js 加密，后端 go 解密
RSA 加密算法简介一种比较常见的非对称加密算法,常用于前后端交互中的密码加密,前端使用公钥加密密码,后端使用私钥进行解密.公钥可对外开放,私钥是存放在服务端,外部正常情况下是拿不到解密私钥的. 以 ...
前端js华为云obs上传下载文件与进度条的设置
前端js华为云obs上传下载文件与进度条的设置首先下载OBS BrowserJS SDK安装包用git将代码拉到本地 git clone https://github.com/huaweiclou ...
前端JS基础知识复习笔记（1）
珠峰前端JS基础复习笔记(1) 在财务工作中自学了HTML和CSS之后,硬啃了JS高级编程三,实在觉得想要学的透是需要找一位好老师的,于是最近在学习周啸天老师的JS高级编程课,课外需要再补补基础,就回 ...

前端js实现本地模糊搜索

前端js实现本地模糊搜索相关推荐

最新文章

热门文章