국적 control_jquery를 작성하는 jquery 자바 스크립트

그동안 국적 관리가 잘 안 되어 고생을 하다가 시간을 내어 국적 관리를 작성해서 모두와 공유하게 되었습니다.

주요 기능 및 인터페이스 소개

국적관리는 주로 중국어, 영어 필터링과 키보드 업다운 이벤트를 지원합니다.

소스코드 소개

국적관리의 핵심은 navtionality.js와 mian.css 두 파일입니다. navtionality.js의 주요 기능은 국적 제어의 DOM 구성과 해당 이벤트 바인딩입니다. main.css는 주로 국적 제어 스타일을 렌더링하는 데 사용됩니다. 그리고 main.js는 국적관리 호출 메소드입니다.

HTML 구조

페이지에 국적 컨트롤이 표시되려면 컨트롤이 로드될 페이지에 미리 설정되어 있어야 합니다. control-nationality-suggest는 컨테이너이고, 입력은 입력 수신이고, nationality-suggest-list-container는 필터링된 국적 목록을 표시하는 데 사용되는 프롬프트 목록입니다.

코드 복사 코드는 다음과 같습니다.

           

                                           
                                          

                   

중국어 및 영어/코드 검색을 입력하거나 ↑↓

를 선택하세요. ~ > ity-제안 목록">
~ >

navtionality.js 소개

Navtionality는 국적 통제의 핵심이며 주로 국적 통제의 데이터 필터링, DOM 렌더링 및 해당 이벤트 바인딩을 담당합니다. init는 전체 컨트롤에 대한 입구입니다. 특정 바인딩 개체는 전달된 옵션 매개 변수를 통해 결정됩니다.

코드 복사 코드는 다음과 같습니다.

var 국적 = {

데이터:[]
strData: 문자열,
입력: 객체,
목록: 개체,
//함수 설명: 초기화
초기화: 함수(옵션) {
},
//기능 설명: 옵션 설정
setOption: 함수(옵션) {
},
//함수 설명: 바인딩 이벤트
setEvent: 함수() {
},
//함수 설명: 데이터 바인딩
setData: 함수() {
},
//함수 설명: 검색
doSearch: 함수(키) {
},
//기능 설명: 설정 목록
setList: 함수(fvalue) {
},
//함수 설명: 바인딩 목록 이벤트
setListEvent: 함수() {
},
//함수 설명: 단일 항목 값 설정
setValue: 함수(항목, 숨기기) {
},
//기능 설명: 검증 데이터
chkValue: 함수() {
},
//함수 설명: 마우스 이벤트
setKeyDownEvent: 함수(이벤트) {
}
}

빠른 검색 소개

전체 국적 통제에 있어서 검색은 사용자의 입력을 바탕으로 해당 국적 데이터를 어떻게 필터링할지가 가장 중요한 부분입니다. 우리가 채택하는 방법은 먼저 국적 데이터를 형식화하는 것입니다

.

예를 들어 원래 국적 데이터는 다음과 같습니다. [{ id: "CN", en: "China", cn: "Mainland China" }, { id: "HK", en: "Hong Kong", cn: "홍콩, 중국" }, { id: "MO", en: "마카오", cn: "마카오, 중국" }

그러면 형식화된 데이터는 다음과 같습니다: #CN|China|中國 Mainland##HK|Hong Kong|China Hong Kong##MO|Macau|China Macau##

우리는 왜 이러는 걸까요? 빠른 데이터 매칭을 위해서는 정규식을 사용해야 하기 때문입니다.

코드 복사 코드는 다음과 같습니다.

//함수 설명: 검색
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 검색 = [];
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은 국적 제어를 호출하는 메소드로, 페이지에서 제어-국적-제안이라는 이름의 DOM 객체를 순회하여 국적 제어를 바인딩합니다.

코드 복사 코드는 다음과 같습니다.

$(".control-nationality-suggest").each(함수 () {
      var 입력 = $(this).find(".nationality-suggest-input");
      var list = $(this).find(".nationality-suggest-list");
새로운 국적({ 입력: 입력, 목록: 목록 });
})

데모 및 다운로드

데모 보기 데모 다운로드

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

Repo : 팀원을 부활시키는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

4 몇 주 전 By DDD

R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7364

15

자바 튜토리얼

1628

14

Cakephp 튜토리얼

1353

52

라라벨 튜토리얼

1265

25

PHP 튜토리얼

1214

29

더보기