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 相关文章推荐
跨浏览器的事件对象介绍
Jun 27 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 Javascript
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入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Python内置函数dir详解
2015/04/14 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python实现代码审查自动回复消息
2021/02/01 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
交通事故协议书
2014/04/15 职场文书
三年级评语大全
2014/04/23 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
人事局接收函
2015/01/31 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
利用js实现简单开关灯代码
2021/11/23 Javascript
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python