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 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
js日历功能对象
Jan 12 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
js+css实现红包雨效果
Jul 12 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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 输出简单动态WAP页面
2009/06/09 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python os用法总结
2018/06/08 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python 如何调用远程接口
2020/09/11 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
投标承诺函范文
2015/01/21 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Pytorch 实现变量类型转换
2021/05/17 Python
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js