国籍を記述するjquery javascript control_jquery-jsチュートリアル-php.cn

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

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

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

ソースコードの紹介

国籍管理の中核は、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 });

})

デモとダウンロード

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