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

主要功能和界面介绍

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

源码介绍

国籍控件核心是两个文件，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: "中国澳门" }

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

    //功能描述：搜索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)

转载于:https://www.cnblogs.com/cform/p/4286147.html

日积月累系列之国籍控件（js源码）相关推荐

MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
自定义view,仿微信、支付宝密码输入控件的源码实现
研究支付宝密码输入控件及源码实现目标效果图实现思路要想实现输入,就少不了EditText 看整体布局应该是一个横向的LinearLayout 每个格子看进来应该是多个子View 那么我们是不是有 ...
日积月累系列之分页控件（js源码）
最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.s ...
C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
.NET core2.0 发布了,刺激,大致看了一下,很不错,打算后期学习.(不出意外,应该也会写个小系列). 虽然官方推荐用共享类库创建新的类库..然而我这个Demo还是使用的可移植.. 嗯..解释 ...
android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码...
Android精选源码灵活的ShadowView,可替代CardView使用基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器新闻应用项目采用了 ...
pb9 日历控件（源码）
一.效果图: X[关闭日历] .<[上一月份].>[下一月份].≤ [上一年].≥ [下一年].今天:2020/10/20 [ 显示今天日期 ] 二.使用方法: 1).vo_calenda ...
autojs pro采用递归的方式，遍历所有子控件的源码分享
程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一 ...
android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码
Android精选源码灵活的ShadowView,可替代CardView使用基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器新闻应用项目采用了 ...
android 新闻应用、Xposed模块、酷炫的加载动画、下载模块、九宫格控件等源码... 1
Android精选源码灵活的ShadowView,可替代CardView使用基于Tesseract-OCR实现自动扫描识别手机号 Android播放界面仿QQ音乐开源音乐播放器新闻应用项目采用了 ...

日积月累系列之国籍控件（js源码）