基于javascript实现的搜索时自动提示功能


Posted in Javascript onDecember 26, 2014

当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享:

效果图:

基于javascript实现的搜索时自动提示功能

功能描述:

按下键盘后及时搜索条目中的汉字,汉字对应的拼音和号码;

实现思路:

先将条目中的汉字转换成拼音,然后将汉字,拼音,数字拼接成规律的字符串,放入数组,然后每次按下键盘后判断 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 循环读取JSON数据的代码
Jul 17 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
js实现星星打分效果
Jul 05 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
基于jquery实现发送文章到手机的代码
Dec 26 #Javascript
jQuery中ajax的post()方法用法实例
Dec 26 #Javascript
jQuery中ajax的get()方法用法实例
Dec 26 #Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 #Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 #Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 #Javascript
jQuery中ajax的load()方法用法实例
Dec 26 #Javascript
You might like
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python实现图片拼接的代码
2018/07/02 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python语法分析之字符串格式化
2019/06/13 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Django websocket原理及功能实现代码
2020/11/14 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
人事科岗位职责范本
2014/03/02 职场文书
中职生自荐信范文
2014/06/15 职场文书
绘画专业自荐信
2014/07/04 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
考研复习计划
2015/01/19 职场文书
应届生简历自我评价
2015/03/11 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
经营场所证明范本
2015/06/19 职场文书
小学大队委竞选口号
2015/12/25 职场文书