国籍を記述する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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25：Myriseのすべてのロックを解除する方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7469

15

CakePHP チュートリアル

1376

52

Steamのアカウント名の形式は何ですか

77

11

Win11 Activation Key Permanent

48

19

NYTの接続はヒントと回答です

19

29

もっと見る