基于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 相关文章推荐
页面装载js及性能分析方法介绍
Mar 21 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
对于Python中线程问题的简单讲解
2015/04/03 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
挂靠协议书范本
2014/04/22 职场文书
个人总结与自我评价
2015/02/14 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
房产遗嘱范本
2015/08/06 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang