基于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与函数式编程解释
Apr 27 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
20个最新的jQuery插件
Jan 13 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
vue实现评论列表功能
Oct 25 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 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
一些常用的php简单命令代码集锦
2007/09/24 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
vuejs如何配置less
2017/04/25 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue使用codemirror的两种用法
2019/08/27 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue实现放大镜效果
2020/09/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
django创建超级用户过程解析
2019/09/18 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
抄作业检讨书
2014/02/17 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
送达通知书
2015/04/25 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python