ホームページ >ウェブフロントエンド >jsチュートリアル >国籍を記述するjquery javascript control_jquery
国籍を記述するjquery javascript control_jquery
- WBOYオリジナル
- 2016-05-16 16:14:321927ブラウズ
私は国籍管理が適切に行われていないことに悩んでいたので、時間をかけて国籍管理を作成し、みんなと共有しました。
主な機能とインターフェースの紹介
国籍制御は主に中国語と英語のフィルタリングとキーボードの上下イベントをサポートします。
ソースコードの紹介
国籍管理の中核は、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;
ナビゲーション性は国籍制御の中核であり、主にデータ フィルタリング、DOM レンダリング、および国籍制御の対応するイベント バインディングを担当します。 init は、コントロール全体への入り口です。特定のバインディング オブジェクトは、渡されたオプション パラメーターによって決定されます。
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
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 });
})
デモとダウンロード