国籍を記述するjquery javascript control_jquery

私は国籍管理が適切に行われていないことに悩んでいたので、時間をかけて国籍管理を作成し、みんなと共有しました。

主な機能とインターフェースの紹介

国籍制御は主に中国語と英語のフィルタリングとキーボードの上下イベントをサポートします。

ソースコードの紹介

国籍管理の中核は、navtionality.js と mian.css の 2 つのファイルです。 navtionality.js の主な機能は国籍コントロールの DOM 構築と、対応するイベント バインディングです。main.css は主に国籍コントロールのスタイルをレンダリングするために使用されます。そしてmain.jsは国籍制御の呼び出しメソッドです。

HTML 構造

ページに国籍コントロールを表示するには、コントロールを読み込むページに国籍コントロールを事前に設定する必要があります。 control-nationality-suggest はコンテナ、input は入力受付、nationality-suggest-list-container はプロンプトリストで、フィルタリングされた国籍リストを表示するために使用されます。

コードをコピーします コードは次のとおりです:

中国語と英語を入力/コード検索、または ↑↓

を選択 ＆lt; ul class = "Nationalality-suggest-list"＆gt;＆lt;/ul＆gt;
                                                                                                                                                                                                               

navtionality.js の概要

ナビゲーション性は国籍制御の中核であり、主にデータ フィルタリング、DOM レンダリング、および国籍制御の対応するイベント バインディングを担当します。 init は、コントロール全体への入り口です。特定のバインディング オブジェクトは、渡されたオプション パラメーターによって決定されます。

コードをコピーします コードは次のとおりです:

var 国籍 = {

データ:[]
strData: 文字列、
入力: オブジェクト、
リスト: オブジェクト、
//関数の説明: 初期化
init: 関数 (オプション) {
}、
//関数説明: オプション設定
setOption: 関数 (オプション) {
}、
//関数の説明: バインディングイベント
setEvent: function () {
}、
//関数の説明: データをバインド
setData: function () {
}、
//関数説明: 検索
doSearch: 関数 (キー) {
}、
//機能説明：設定リスト
setList: 関数 (fvalue) {
}、
//関数の説明: バインディング リスト イベント
setListEvent: function () {
}、
//関数説明: 単一項目の値を設定
setValue: 関数 (項目、非表示) {
}、
//関数説明: 検証データ
chkValue: function () {
}、
//関数の説明: マウスイベント
setKeyDownEvent: 関数 (イベント) {
}
}

クイック検索の概要

国籍管理全体において、検索は最も重要な部分であり、ユーザーの入力に基づいて、対応する国籍データをどのようにフィルタリングするかが重要です。私たちが採用する方法は、通常のマッチング方法です。まず国籍データをフォーマットします

。

たとえば、元の国籍データは次のようになります: [{ id: "CN", en: "中国", cn: "中国本土" }, { id: "HK", en: "香港", cn: "香港、中国" }, { id: "MO"、en: "マカオ"、cn: "マカオ、中国" }

フォーマットされたデータは次のようになります: #CN|中国|中国本土##HK|香港|中国香港##MO|マカオ|中国マカオ##

なぜこれを行うのでしょうか?データの高速マッチングを実現するには正規表現を使用する必要があるためです。

コードをコピーします コードは次のとおりです:

//関数説明: 検索
doSearch: 関数 (キー) {
if (!key || key == "") return ["CN|中国|中国本土", "HK|香港|香港、中国"、"MO|マカオ|マカオ、中国"、"TW|台湾|台湾、中国" ];
var reg = new RegExp("#[^#]*?" key "[^#]*?#", "gi");
return this.strData.match(reg);
}

正規一致を見て、ほとんどのことを理解できたはずです。はい、正規表現を使用して、元の配列を文字列に変換することでデータをすばやくフィルタリングします。

トラバーサルによって実装した検索方法と比較すると、正則化の効率がはるかに高いことがわかります。

コードをコピーします コードは次のとおりです:

//関数説明: 検索
doSearch: 関数 (キー) {
if (!key || key == "") return ["CN|中国|中国本土", "HK|香港|香港、中国"、"MO|マカオ|マカオ、中国"、"TW|台湾|台湾、中国" ];
var search = [];
for(var i=0; i if(this.data[i].id.indexOf(key) >= 0 || this.data[i].en.indexOf(key) >= 0 || this.data[i].cn.indexOf (キー) >= 0){
Search.push(this.data[i]);
}
}
検索に戻る;
}

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");
新しい国籍({ input: input, list: list });
})

デモとダウンロード

デモを見る デモのダウンロード

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript_javascriptスキルの継承について詳しく解説次の記事：JavaScript_javascriptスキルの継承について詳しく解説

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル