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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
深入php self与$this的详解
2013/06/08 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue实现搜索功能
2019/05/28 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
js实现时钟定时器
2020/03/26 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python 写入csv乱码问题解决方法
2016/10/23 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python实现log日志的示例代码
2018/04/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
python如何停止递归
2020/09/09 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
简易离婚协议书范本
2014/10/24 职场文书
廉政承诺书
2015/01/19 职场文书
七年级作文之游记
2019/12/11 职场文书