국적 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");
새로운 국적({ 입력: 입력, 목록: 목록 });
})

데모 및 다운로드

데모 보기 데모 다운로드