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

主要功能和界面介绍

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

源码介绍

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

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">输入中英文/代码搜索或&uarr;&darr;选择</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下载

欢迎访问:cform官方网站:http://www.cform.cn 演示地址:http://demo.cform.cn (用户名:001 密码123)

日积月累系列之国籍控件(js源码)的更多相关文章

  1. 日积月累系列之省市选择器(js源码)

    省市选择器是大家经常用到的, 但网上找的省市选择器都不是很实用,于是自己写了移动端的省市选择器. 界面: 源码结构: 演示地址:http://component.cform.cn/city/ 演示二维 ...

  2. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  3. 日积月累系列之分页控件(js源码)

    最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.s ...

  4. C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET ...

  5. android弹力效果菜单、组件化项目、电影票选座控件的源码

    Android精选源码 android启动扫一扫和收付款的小部件源码 android弹力效果的抽屉菜单源码 对RecyclerView Item做动画 源码 android类似QQ空间,微信朋友圈,微 ...

  6. 【分享】自己写的一个可空的DateTimePicker控件-附源码

    最近这段时间在重构以前的一个项目,其中有一项就是要把DateTimePicker控件值可空.大家都知道的DateTimePicker值为DateTime类型,DateTime类型值不能等于Null.但 ...

  7. android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码

    Android精选源码 灵活的ShadowView,可替代CardView使用 基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器 新闻应用项目采用了 ...

  8. 超强封装的RichTextBox控件(C#源码)

    有点类似QQ聊天框所带的RichText. 功能进行了RTF的封装,直接调用函数插入图片,连接,特列文字.具体请查看代码 ExRichTextBox_src

  9. [WinForm]FastColoredTextBox控件(附源码)

    Fast Colored TextBox is text editor component for .NET. Allows you to create custom text editor with ...

随机推荐

  1. 于linux已安装moodle

    本文介绍了两个虚拟机的安装linux server 及相关服务,随着后这些基础.安装应用程序服务 moodle 2.7+  它是使用最广泛的平台,网络课程. 在安装过程中moodle之前,需要支持软件 ...

  2. 有意练习--Rails RESTful(一)

    书要反复提及<哪里有天才>在说,大多数所谓的天才是通过反复刻意练习获得. 当你的练习时间达到10000几个小时后,.你将成为该领域的专家. 近期在学习rails怎样实现RESTful We ...

  3. 弹出层 div dialog

    写你自己的弹出框 风格,如下面 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2xpYW5sdWFu/font/5a6L5L2T/fontsize ...

  4. Android: ADT 23.0.2

    http://pan.baidu.com/s/1gdnBUUJ 版权声明:本文博主原创文章.博客,未经同意不得转载.

  5. android学习记录(三)百度地图错误---只有一个电话显示帧,没有地图内容。

    安卓开发新手百度地图,刚开始碰到一个问题,没有地图信息,还有就是它只有一帧. 如图所示: 上网寻找说是key的问题,然后又一次申请.还是不行. 最后再次看了自己的Manifest文件,发现自己的< ...

  6. IT只忍者龟Photoshop简单人像的头发抠图过程

    一.导入素材,加入蒙版 1.导入美女图片 2.导入背景图片 如今须要将美女抠出来放在这个背景上,怎么办?一定会有人想到用通道,抽出.(备注:在ps6以后版本号,抽出已经没有这个选项了). 3.将美女图 ...

  7. 彩色图像--色彩空间 HSI(HSL)、HSV(HSB)

    得知DIP文章66日 转载请注明文章出处:http://blog.csdn.net/tonyshengtan ,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管.欢迎共同开发:https://g ...

  8. PHP IOS PUSH Demo

    <?php // Put your device token here (without spaces): $deviceToken = '679b466b030038bed6c3a2563c7 ...

  9. android studio 在线更新android sdk,遇到无法Fetching https://dl-ssl.google.com/...的解决方式

    近期实在受不了eclipse的"迟钝",准备入手Android studio开发环境,可是貌似不太顺利,安装成功了Android studio,在线更新Android adk的时候 ...

  10. Html.Partial和Html. RenderPartial用法

    Html.Partial和Html. RenderPartial用法 Html.partial和RenderPartial的用法与区别Html.partial和RenderPartial都是输出htm ...