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 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
vue store之状态管理模式的详细介绍
Jun 13 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中的正规表达式(一)
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
常用的9个JavaScript图表库详解
2017/12/19 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python迭代dict的key和value的方法
2018/07/06 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
个人求职信范例
2014/01/29 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
烹饪自我鉴定
2014/03/01 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
党校学习党性分析材料
2014/12/19 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android