基于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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
基于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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python学习 流程控制语句详解
2016/06/01 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python压包的概念及实例详解
2021/02/17 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
怎样声明子类
2013/07/02 面试题
网管求职信
2014/03/03 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
个人股份合作协议书
2014/10/24 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
音乐教师个人总结
2015/02/06 职场文书
离婚案件答辩状
2015/05/22 职场文书
MySQL学习之基础操作总结
2022/03/19 MySQL
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
MongoDB支持的索引类型
2022/04/11 MongoDB
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server