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 相关文章推荐
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
Javascript学习指南
2014/12/01 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
python实现自动更换ip的方法
2015/05/05 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python小程序实现刷票功能详解
2019/07/17 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
消防安全承诺书
2014/05/22 职场文书
英语求职信范文
2014/05/23 职场文书
新农村建设标语
2014/06/24 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
故意杀人案辩护词
2015/05/21 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书