跳转到主内容
极星编程网:以代码为星,赴技术山海!

js实现模糊查询实例详解

本文主要和大家分享jjs实现模糊查询实例详解,主要以代码的方式和大家分享,希望能帮助到大家。 1、简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现。 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询。 前端直接使用字符串的indexOf()方法或者正则表达式匹配实现,相比后端实现这种方法的用户体验更友好。 2、demo 当输入框中输入内容或者点击查询按钮时, 根据输入框中的关键字,模糊查询下面表格的内容,并重新渲染表格。 代码如下。 (1) javascript 代码: let listData = ["上海市","黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区", "闸北区","杨浦区","虹口区","闵行区","宝山区","嘉定区","浦东新区", "金山区","松江区","青浦区","南汇区","奉贤区","崇明县" ]; 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载
function Fuzzysearch(listData){ this.listData = listData,//请求得到的数据 this.searchKey = document.getElementById('searchKey'),//查询关键字 this.searchBtn = document.getElementById('searchBtn'),//查询按钮 this.searchShow = document.getElementById('searchShow')//显示查询结果的表格 this.renderTab(this.listData); this.init(); } Fuzzysearch.prototype={ init :function(){ let _this = this; //键入触发事件 _this.searchKey.onkeyup=function(){ let searchResult = _this.searchFn(); _this.renderTab(searchResult); }; //点击查询按钮触发事件 _this.searchBtn.onclick=function(){ let searchResult = _this.searchFn(); _this.renderTab(searchResult); }; }, searchFn:function(){ var keyWord = this.searchKey.value; var len = this.listData.length; var arr = []; var reg = new RegExp(keyWord); for(var i=0;i"; } this.searchShow.innerHTML = colStr; } } new Fuzzysearch(listData);
相关推荐: 实例详解js如何实现模糊查询

相关文章