jquery+javascript编写国籍控件


Posted in Javascript onFebruary 12, 2015

一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家。

主要功能和界面介绍

国籍控件主要支持中文、英文过滤以及键盘上下事件。

jquery+javascript编写国籍控件

源码介绍

国籍控件核心是两个文件,navtionality.js 和 mian.css。navtionality.js主要功能是国籍控件的DOM构建以及相应的事件绑定;main.css主要是用于渲染国籍控件的样式。而main.js是国籍控件的调用方法。

jquery+javascript编写国籍控件

HTML结构

国籍控件要呈现在页面上,必须事先在页面中加以设置以供控件加载使用。control-nationality-suggest 是容器,input 是输入接收,nationality-suggest-list-container是提示列表,用于显示筛选后的国籍列表。

    <div class="container">

        <div class="control-nationality-suggest">

            <input type="text" class="nationality-suggest-input" />

            <div class="nationality-suggest-list-container">

                <div class="nationality-suggest-hint">输入中英文/代码搜索或↑↓选择</div>

                <ul class="nationality-suggest-list"></ul>

            </div>

        </div>

    </div>

navtionality.js 介绍

navtionality是国籍控件的核心,主要负责国籍控件的数据过滤,DOM呈现以及相应的事件绑定。init是整个控件的入口,通过传入的option参数,来确定具体的绑定对象。

var nationality = {

    data:[]

    strData: String,

    input: Object,

    list: Object,

    //功能描述:初始化

    init: function (option) {

    },

    //功能描述:选项设置

    setOption: function (option) {

    },

    //功能描述:绑定事件

    setEvent: function () {

    },

    //功能描述:绑定数据

    setData: function () {

    },

    //功能描述:搜索

    doSearch: function (key) {

    },

    //功能描述:设置列表

    setList: function (fvalue) {

    },

    //功能描述:绑定列表事件

    setListEvent: function () {

    },

    //功能描述:设置单项值

    setValue: function (item, hide) {

    },

    //功能描述:校验数据

    chkValue: function () {

    },

    //功能描述:鼠标事件

    setKeyDownEvent: function (event) {

    }

}

快速搜索介绍

在整个国籍控件中,搜索是最重要的一块,如何根据用户的输入筛选出相应的国籍数据。我们采取的方法是通过正则匹配法,我们把国籍数据首先进行格式化处理

比如原始的国籍数据是这样的:[{ id: "CN", en: "China", cn: "中国大陆" }, { id: "HK", en: "Hong Kong", cn: "中国香港" }, { id: "MO", en: "Macau", cn: "中国澳门" }

那么我们格式化后的数据就是这样的:#CN|China|中国大陆##HK|Hong Kong|中国香港##MO|Macau|中国澳门##

为什么要这么处理呢?是因为我们要借助正则表达式来实现数据的快速匹配。

    //功能描述:搜索

    doSearch: function (key) {

        if (!key || key == "") return ["CN|China|中国大陆", "HK|Hong Kong|中国香港", "MO|Macau|中国澳门", "TW|Taiwan|中国台湾"];

        var reg = new RegExp("#[^#]*?" + key + "[^#]*?#", "gi");

        return this.strData.match(reg);

    }

想必大家看到我们的正则匹配,应该明白一大半了,没错,我们通过将原先的数组转换成字符串的方式,利用正则快速实现数据的筛选过滤。

对比下我们通过遍历实现的搜索方式,可以发现正则的效率会高很多。

    //功能描述:搜索

    doSearch: function (key) {

        if (!key || key == "") return ["CN|China|中国大陆", "HK|Hong Kong|中国香港", "MO|Macau|中国澳门", "TW|Taiwan|中国台湾"];

        var search = [];

        for(var i=0; i< this.data.length; i++){

            if(this.data[i].id.indexOf(key) >= 0 || this.data[i].en.indexOf(key) >= 0 || this.data[i].cn.indexOf(key) >= 0){

                search.push(this.data[i]);

            }

        }

        return search;

    }

main.js 介绍

main是调用国籍控件的方法,通过遍历页面中的calss为control-nationality-suggest的DOM对象来绑定国籍控件。

 $(".control-nationality-suggest").each(function () {

        var input = $(this).find(".nationality-suggest-input");

        var list = $(this).find(".nationality-suggest-list");

        new nationality({ input: input, list: list });

})

演示与下载

查看DEMO DEMO下载

Javascript 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
node.js文件操作系统实例详解
Nov 05 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JS实现的生成随机数的4个函数分享
Feb 11 #Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 #Javascript
Javascript核心读书有感之语句
Feb 11 #Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 #Javascript
JavaScript中的函数模式详解
Feb 11 #Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 #Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 #Javascript
You might like
php实现读取和写入tab分割的文件
2015/06/01 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php 数组元素快速去重
2017/05/05 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python中class的定义及使用教程
2019/09/18 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
软件配置管理有什么好处
2015/04/15 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
运动会广播稿300字
2014/01/10 职场文书
食品安全汇报材料
2014/08/18 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
疾病证明书
2015/06/19 职场文书
新闻稿格式范文
2015/07/18 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技