jquery+javascript编写国籍控件

2020-05-22 21:59:14易采站长站整理

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

主要功能和界面介绍

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

源码介绍

国籍控件核心是两个文件,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”>输入中英文/代码搜索或↑↓选择</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) {