关键词:
当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享:
功能描述:
按下键盘后及时搜索条目中的汉字,汉字对应的拼音和号码;
实现思路:
先将条目中的汉字转换成拼音,然后将汉字,拼音,数字拼接成规律的字符串,放入数组,然后每次按下键盘后判断 input 中的值是汉字,拼音,还是数字,然后按固定的规律去循环数组,这样就能找到对应的条目了;
启用方式:
// search-test-inner ---> 最外层div // search-value ---> input 输入框 // search-value-list ---> 搜索结果显示div // search-li ---> 搜索条目 new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
注意:搜索条目加上两个临时数据,data-name 和 data-phone ,用来存储汉字和数字。
说明:拼音的转换用到了一个叫 jQuery.Hz2Py-min.js 的插件,由于这个插件只能转换 input 里的值,所以代码里多了一个步骤,先将值放入一个临时的 input ,再转换。
HTML:
<div class="search-test-inner"> <div class="search-val-inner"> <input type="text" class="search-value" placeholder="搜索"> <ul class="search-value-list"></ul> </div> <div class="member-list-inner"> <ul> <li class="search-li" data-name="战士" data-phone="13914157895"> <span class="phone">13914157895</span> <span class="name">战士</span> </li> <li class="search-li" data-name="牧师" data-phone="15112357896"> <span class="phone">15112357896</span> <span class="name">牧师</span> </li> <li class="search-li" data-name="盗贼" data-phone="13732459980"> <span class="phone">13732459980</span> <span class="name">盗贼</span> </li> <li class="search-li" data-name="德鲁伊" data-phone="18015942365"> <span class="phone">18015942365</span> <span class="name">德鲁伊</span> </li> <li class="search-li" data-name="武僧" data-phone="15312485698"> <span class="phone">15312485698</span> <span class="name">武僧</span> </li> <li class="search-li" data-name="死灵法师" data-phone="13815963258"> <span class="phone">13815963258</span> <span class="name">死灵法师</span> </li> <li class="search-li" data-name="圣骑士" data-phone="13815934258"> <span class="phone">13815934258</span> <span class="name">圣骑士</span> </li> </ul> </div> </div>
CSS:
* { padding: 0; margin: 0; } ol , ul { list-style: none; } body { font-size: 12px; color:#333; } .search-test-inner { margin: 100px auto; padding: 10px; width: 400px; background: #e0e0e0; border-radius: 10px; box-shadow: 1px 2px 6px #444; } .search-val-inner { margin-bottom: 20px; padding: 10px; background: #fff; } .member-list-inner .search-li { padding: 10px; } .search-value-list { margin-top: 10px; } .search-value-list li { padding: 5px; } .member-list-inner .search-li .phone, .search-value-list li .phone { float: right; } .search-value { width: 100%; height: 30px; line-height: 30px; } .tips { font-weight: bold; }
JS:
//---------------------------------------------------【初始化】 function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){ //存储拼音+汉字+数字的数组 this.searchMemberArray = []; //作用对象 this.dom = $("." + dom); //搜索框 this.searchInput = "." + searchInput; //搜索结果框 this.searchResultInner = this.dom.find("." + searchResultInner); //搜索对象的名单列表 this.searchList = this.dom.find("." + searchList); //转换成拼音并存入数组 this.transformPinYin(); //绑定搜索事件 this.searchActiveEvent(); } SEARCH_ENGINE.prototype = { //-----------------------------【转换成拼音,并将拼音、汉字、数字存入数组】 transformPinYin : function(){ //临时存放数据对象 $("body").append(‘<input type="text" class="hidden pingying-box">‘); var $pinyin = $("input.pingying-box"); for(var i=0;i<this.searchList.length;i++){ //存放名字,转换成拼音 $pinyin.val(this.searchList.eq(i).attr("data-name")); //汉字转换成拼音 var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,""); //汉字 var cnCharacter = this.searchList.eq(i).attr("data-name"); //数字 var digital = this.searchList.eq(i).attr("data-phone"); //存入数组 this.searchMemberArray.push(pinyin + "&" + cnCharacter + "&" + digital); } //删除临时存放数据对象 $pinyin.remove(); }, //-----------------------------【模糊搜索关键字】 fuzzySearch : function(type,val){ var s; var returnArray = []; //拼音 if(type === "pinyin"){ s = 0; } //汉字 else if(type === "cnCharacter"){ s = 1; } //数字 else if(type === "digital"){ s = 2; } for(var i=0;i<this.searchMemberArray.length;i++){ //包含字符 if(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){ returnArray.push(this.searchMemberArray[i]); } } return returnArray; }, //-----------------------------【输出搜索结果】 postMemberList : function(tempArray){ var html = ‘‘; //有搜索结果 if(tempArray.length > 0){ html += ‘<li class="tips">搜索结果(‘ + tempArray.length + ‘)</li>‘; for(var i=0;i<tempArray.length;i++){ var sArray = tempArray[i].split("&"); html += ‘<li>‘; html += ‘<span class="phone">‘ + sArray[2] + ‘</span>‘; html += ‘<span class="name">‘ + sArray[1] + ‘</span>‘; html += ‘</li>‘; } } //无搜索结果 else{ if($(this.searchInput).val() != ""){ html += ‘<li class="tips">无搜索结果……</li>‘; }else{ this.searchResultInner.html(""); } } this.searchResultInner.html(html); }, //-----------------------------【绑定搜索事件】 searchActiveEvent : function(){ var searchEngine = this; $(document).on("keyup",this.searchInput,function(){ //临时存放找到的数组 var tempArray = []; var val = $(this).val(); //判断拼音的正则 var pinYinRule = /^[A-Za-z]+$/; //判断汉字的正则 var cnCharacterRule = new RegExp("^[\u4E00-\u9FFF]+$","g"); //判断整数的正则 var digitalRule = /^[-+]?d+(.d+)?$/; //只搜索3种情况 //拼音 if(pinYinRule.test(val)){ tempArray = searchEngine.fuzzySearch("pinyin",val); } //汉字 else if(cnCharacterRule.test(val)){ tempArray = searchEngine.fuzzySearch("cnCharacter",val); } //数字 else if(digitalRule.test(val)){ tempArray = searchEngine.fuzzySearch("digital",val); } else{ searchEngine.searchResultInner.html(‘<li class="tips">无搜索结果……</li>‘); } searchEngine.postMemberList(tempArray); }); } };
使用 Javascript 在客户端机器上进行基于全文的搜索
】使用Javascript在客户端机器上进行基于全文的搜索【英文标题】:FulltextbasedSearchonClientMachineusingJavaScript【发布时间】:2013-03-2708:04:11【问题描述】:我正在尝试在客户端计算机上实现基于全文的搜索功能。我发现Lunr.js部分满足... 查看详情
前端基础之javascript
一.JavaScript简介JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的... 查看详情
前端基础之javascript
一、JavaScript概念JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下... 查看详情
基于 javascript 变量搜索数据库
】基于javascript变量搜索数据库【英文标题】:Searchingadatabasebasedonajavascriptvariable【发布时间】:2013-03-0504:14:03【问题描述】:我正在尝试执行一个特定的查询,在其中搜索我使用javascript获得的名称。我有这个HTML:<aonmouseover="s... 查看详情
2017年javascript框架回顾--前端框架
概述:对于JavaScript社区来说,npm的主要功能之一就是帮助开发者发掘所需的npmRegistry中的库和框架。npm强大的搜索功能能够帮助找到一组相关的软件包,同时其内置的的文档和使用统计信息,可以帮助开发者决定使用哪一种软件... 查看详情
web前端第六篇javascript对象
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的<scriptlanguage=... 查看详情
如何实现基于多个参数的搜索功能?
】如何实现基于多个参数的搜索功能?【英文标题】:Howtoimplementsearchfeaturebasedonmultipleparameters?【发布时间】:2021-12-2619:30:21【问题描述】:如果我有一个与其他表相关的用户表,并且我想根据用户表列过滤用户(假设要按年龄... 查看详情
如何使用在html文档中搜索文本的javascript制作功能搜索框[重复]
】如何使用在html文档中搜索文本的javascript制作功能搜索框[重复]【英文标题】:Howtomakeafunctionalsearchboxusingjavascriptthatsearchestextinhtmldocument[duplicate]【发布时间】:2021-07-2314:10:07【问题描述】:我有一个像这样的html文档,并希望搜... 查看详情
使用 javascript 在多个表上创建搜索功能
】使用javascript在多个表上创建搜索功能【英文标题】:Createsearchfunctiononmultipletableswithjavascript【发布时间】:2020-10-2720:20:10【问题描述】:我是一名新开发人员。我现在正在为多个表执行搜索功能。问题是当我搜索它时,它只显... 查看详情
es:kibana
...页面的Elasticsearch前端展示工具。Kibana全部使用HTML语言和Javascript编写的,查询语法是基于Lucene的查询语法。允许布尔运算符、通配符和字段筛选。注意关键字要大写全文搜索在搜索栏输入login,会返回所有字段值中包含login的文... 查看详情
前端页面模拟浏览器搜索功能ctrl+f实现(代码片段)
<html><head><styletype="text/css">.rescolor:Red;.resultbackground:yellow;</style><scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"type="text/javascript"></s 查看详情
javascript一些功能函数基于数组和对象的解构(代码片段)
如何递归搜索对象树并使用 JavaScript/Prototype 1.7 基于键/值返回匹配的对象
】如何递归搜索对象树并使用JavaScript/Prototype1.7基于键/值返回匹配的对象【英文标题】:HowdoIrecursivelysearchanobjecttreeandreturnthematchingobjectbasedonakey/valueusingJavaScript/Prototype1.7【发布时间】:2011-03-2615:52:46【问题描述】:我有一些嵌... 查看详情
搜索引擎之全文搜索算法功能实现(基于lucene)
之前做去转盘网的时候,我已经公开了非全文搜索的代码,需要的朋友希望能够前去阅读我的博客。本文主要讨论如何进行全文搜索,由于本人花了很长时间设计了新作:观点,观点对全文搜索的要求还是很高的,所以我又花了... 查看详情
web前端技术分享:常用javascript框架有哪些?
常用JavaScript框架有哪些?对于前端开发工作者来说,JavaScript绝对是绕不开的一个点,可以所前端的大部分动态交互都是由JS完成,所以学好JavaScript基本上你就成功了一半。下面小千就来为大家介绍一个常见并且... 查看详情
搜索引擎之全文搜索算法功能实现(基于lucene)
之前做去转盘网的时候,我已经公开了非全文搜索的代码,需要的朋友希望能够前去阅读我的博客。本文主要讨论如何进行全文搜索,由于本人花了很长时间设计了新作:观点,观点对全文搜索的要求还是很高的,所以我又花了... 查看详情
前端之bootstrap(代码片段)
...kOtto和JacobThornton一起开发的,Bootstra框架是基于HTML、CSS、JavaScript开发的,它因简洁、直观、功能强大被开发者广发使用。 Bootstrap前端框架使得Web开发更加快捷,提供了优雅的HTML、CSS和JavaScript规范 查看详情
javascript中是不是有indexOf来搜索具有自定义比较功能的数组
】javascript中是不是有indexOf来搜索具有自定义比较功能的数组【英文标题】:IsthereanindexOfinjavascripttosearchanarraywithcustomcomparefunctionjavascript中是否有indexOf来搜索具有自定义比较功能的数组【发布时间】:2012-09-0314:41:22【问题描述】... 查看详情