javascript_javascript 스킬 기반 검색 시 자동 프롬프트 기능

데이터의 양이 많지 않고 백엔드에 해당하는 기능적 인터페이스가 없을 때, 간단한 검색 기능은 기본적으로 프론트엔드에서 구현하고 있어서 최근에 사용하게 되어서 하나 작성해봤습니다. 모든 사람과 공유하기 위해 게시했습니다.

렌더링:

기능 설명:

키보드를 누른 후, 항목에 있는 한자를 검색하고, 해당 병음과 한자의 수를 검색하세요.

구현 아이디어:

먼저 항목의 한자를 병음으로 변환한 후 한자, 병음과 숫자를 일반 문자열로 이어붙여 배열에 넣은 다음 입력의 값이 한자 병음인지 확인합니다. , 또는 키보드를 누를 때마다 숫자를 입력한 다음 고정된 규칙에 따라 배열을 반복하여 해당 항목을 찾을 수 있습니다.

활성화 방법:

// 검색-테스트-내부 --->가장 바깥쪽 div
// 검색값 ---> // 검색값 목록 ---> 검색결과 표시 div
// search-li ---> 항목 검색
new SEARCH_ENGINE("검색-테스트-내부","검색-값","검색-값-목록","검색-li");
참고: 검색 항목과 두 개의 임시 데이터인 데이터 이름 및 데이터 전화는 한자와 숫자를 저장하는 데 사용됩니다.

참고: 병음 변환은 jQuery.Hz2Py-min.js라는 플러그인을 사용합니다. 이 플러그인은 입력의 값만 변환할 수 있으므로 코드에 추가 단계가 있습니다. 임시 입력을 한 다음 변환합니다.

HTML:

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

   

       
       

   

   

       

           
• 
                  13914157895
                  战士
             
             
• 
                  15112357896
                  牧师
             
             
• 
                  13732459980
                  盗贼
             
             
• 
                  18015942365
                  德鲁伊
             
             
• 
                  15312485698
                  무용
             
             
• 
                  13815963258
                  死灵法师
             
             
• 
                  13815934258
                  圣骑士
             
         

   

CSS:

复代码 代码如下:

* { 패딩: 0; 여백: 0; }
ol , ul { 목록 스타일: 없음; }
본문 { 글꼴 크기: 12px; 색상:#333; }
.search-test-inner { 여백: 100px 자동; 패딩: 10px; 너비: 400px; 배경: #e0e0e0; 테두리 반경: 10px; 상자 그림자: 1px 2px 6px #444; }
.search-val-inner { 여백-하단: 20px; 패딩: 10px; 배경: #fff; }
.member-list-inner .search-li { 패딩: 10px; }
.search-value-list { 여백 상단: 10px; }
.search-value-list li { 패딩: 5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: 오른쪽; }
.search-value { 너비: 100%; 높이: 30px; 줄 높이: 30px; }
.tips { 글꼴 두께: 굵게; }

JS:

复主代码 代码如下:

//------------------------------------------------ ---【초기화】
함수 SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//병음, 한자, 숫자를 저장할 배열
This.searchMemberArray = [];
//행동의 대상
This.dom = $("." dom);
//검색창
This.searchInput = "." 검색입력;
//검색결과 상자
This.searchResultInner = this.dom.find("." searchResultInner);
//검색 객체 목록
This.searchList = this.dom.find("." searchList);
//병음으로 변환하여 배열에 저장
This.transformPinYin();
//바인딩 검색 이벤트
This.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
//----------------【병음으로 변환하여 병음, 한자, 숫자를 배열에 저장합니다】
TransformPinYin : function(){
//데이터 객체 임시 저장
           $("body").append('');
        var $pinyin = $("input.pingying-box");
for(var i=0;i // 이름을 저장하고 병음으로 변환합니다
               $pinyin.val(this.searchList.eq(i).attr("data-name"));
//한자를 병음으로 변환
          var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//한자
          var cnCharacter = this.searchList.eq(i).attr("data-name");
// 숫자 <<>           var digital = this.searchList.eq(i).attr("data-phone");
​​​​​​ //배열에 저장
This.searchMemberArray.push(pinyin "&" cnCharacter "&" digital);
}
//임시저장 데이터 객체 삭제
         $pinyin.remove();
},
//--------------------------------[퍼지 검색어]
fuzzySearch : 함수(유형,값){
      var s;
        var returnArray = [];
​​​​ //병음
If(type === "병음"){
          s = 0;
}
           //한자
          else if(type === "cnCharacter"){
          s = 1;
}
​​​​ //숫자
           else if(type === "digital"){
          s = 2;
}
for(var i=0;i                                // 문자 포함
If(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){
                 returnArray.push(this.searchMemberArray[i]);
            }
}
         return returnArray;
},
//----------------【검색결과 출력】
PostMemberList : 함수(tempArray){
      var html = '';
//검색결과가 있습니다
        if(tempArray.length > 0){
            html = '

搜索结果(' tempArray.length ')

';
            for(var i=0;i                 var sArray = tempArray[i].split("&");
                html = '

';
                html = '' sArray[2] '';
                html = '' sArray[1] '';
                html = '

';
            }
        }
        //无搜索结果
        그렇지 않으면{
            if($(this.searchInput).val() != ""){
                html = '

无搜索结果……

';
            }그밖에{
                this.searchResultInner.html("");
            }
        }
        this.searchResultInner.html(html);
    },
    //----------------【绑定搜索事件】
    searchActiveEvent : 함수(){
        var searchEngine = this;
        $(document).on("keyup",this.searchInput,function(){
            //临时存放找到的数组
            var tempArray = [];
            var val = $(this).val();
            //判断拼소리적정则
            var pinYinRule = /^[A-Za-z] $/;
            //判断汉字字正则
            var cnCharacterRule = new RegExp("^[u4E00-u9FFF] $","g");
            //判断整数적정당
            var digitalRule = /^[- ]?d (.d )?$/;
            //只搜索3种情况
            //소리
            if(pinYinRule.test(val)){
                tempArray = searchEngine.fuzzySearch("pinyin",val);
            }
            //문자
            else if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch("cnCharacter",val);
            }
            //문자
            else if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch("digital",val);
            }
            그렇지 않으면{
                searchEngine.searchResultInner.html('

无搜索结果……

');
            }
              searchEngine.postMemberList(tempArray);
        });
}
};

효과가 좋지 않나요? 친구들, 예쁘게 꾸미고 나만의 프로젝트에 활용해보세요