데이터 볼륨이 크지 않고 백엔드에 대한 해당 기능 인터페이스가 없으면 일부 간단한 검색 기능은 기본적으로 프론트 엔드에 의해 구현됩니다. 나는 최근에 그것을 사용했다. 나는 하나를 썼고 당신과 공유하기 위해 그것을 게시했습니다.
생식 이미지 :
기능 설명 :
키보드를 누른 후, 중국어를 제 시간에 입력하고 중국어에 해당하는 Pinyin 및 숫자를 검색하십시오.
구현 아이디어 :
먼저 중국어를 Pinyin으로 전환 한 다음 중국어, Pinyin 및 숫자를 일반 문자열로 연결하여 배열에 넣습니다. 그런 다음 키보드를 누른 후 입력 값이 중국어, Pinyin 또는 번호인지 확인한 다음 고정 된 규칙에 따라 배열을 반복하여 해당 항목을 찾을 수 있습니다.
활성화 :
// search-test-inner ---> 가장 바깥 쪽 div
// search-value ---> 입력 입력 상자
// search-value-list ---> 검색 결과는 div
// search-li ---> 검색 항목
New Search_Engine ( "Search-Test-Inner", "Search-Value", "Search-Value-List", "Search-Li");
참고 : 검색 항목은 중국어와 숫자를 저장하기위한 두 개의 임시 데이터 인 데이터 이름 및 데이터 폰입니다.
참고 : jQuery.hz2py-min.js라는 플러그인은 Pinyin을 변환하는 데 사용됩니다. 이 플러그인은 입력의 값 만 변환 할 수 있으므로 코드에 추가 단계가 있으며 먼저 값을 임시 입력에 넣은 다음 변환합니다.
HTML :
코드 사본은 다음과 같습니다.
<div>
<div>
<입력 유형 = "텍스트"자리 표시기 = "검색">
<ul> </ul>
</div>
<div>
<ul>
<li data-name = "Warrior"data-phone = "13914157895">
<Span> 13914157895 </span>
<Span> 전사 </span>
</li>
<li data-name = "Pastor"data-phone = "15112357896">
<Span> 15112357896 </span>
<span> 목사 </span>
</li>
<li data-name = "Thieves"data-phone = "13732459980">
<SPAN> 13732459980 </span>
<Span> 도둑 </span>
</li>
<li data-name = "druid"data-phone = "18015942365">
<Span> 18015942365 </span>
<span> 드루이드 </span>
</li>
<li data-name = "monk"data-phone = "15312485698">
<Span> 15312485698 </span>
<span> 원숭이 </span>
</li>
<li data-name = "Neutenant"data-phone = "13815963258">
<SPAN> 13815963258 </span>
<span> 중립 마법사 </span>
</li>
<li data-name = "paladin"data-phone = "13815934258">
<SPAN> 13815934258 </span>
<span> paladin </span>
</li>
</ul>
</div>
</div>
CSS :
코드 사본은 다음과 같습니다.
* {패딩 : 0; 여백 : 0; }
ol, ul {목록 스타일 : 없음; }
바디 {글꼴 크기 : 12px; 색상 :#333; }
.Search-Test-Inner {마진 : 100px Auto; 패딩 : 10px; 너비 : 400px; 배경 : #e0e0e0; Border-Radius : 10px; Box-Shadow : 1px 2px 6px #444; }
.search-val-inner {마진-바닥 : 20px; 패딩 : 10px; 배경 : #fff; }
.Member-list-inner .search-li {패딩 : 10px; }
.search-value-list {margin-top : 10px; }
.search-value-list li {패딩 : 5px; }
.Member-list-inner .search-li .phone,
.search-value-list li .phone {float : 오른쪽; }
.search-value {너비 : 100%; 높이 : 30px; 라인 높이 : 30px; }
.tips {font-weight : bold; }
JS :
코드 사본은 다음과 같습니다.
//---------------------------------------------------【initialization】
function_engine (dom, searchInput, searchResultinner, searchList) {
// Pinyin의 배열 + 중국어 + 숫자
this.searchmemberArray = [];
// 엉덩이
this.dom = $ ( "." + dom);
// 검색 상자
this.searchInput = "." + searchInput;
// 검색 결과 상자
this.searchresultinner = this.dom.find ( "." + SearchResultinner);
// 객체의 검색 목록
this.searchlist = this.dom.find ( "." + searchList);
// Pinyin으로 변환하여 배열로 저장하십시오
this.transformpinyin ();
// 검색 이벤트 바인딩
this.searchActiveEvent ();
}
search_engine.prototype = {
//--------------------------------------------[Convert to pinyin and save pinyin, Chinese characters, and numbers into an array]
transformpinyin : function () {
// 데이터 객체를 임시로 저장합니다
$ ( "body").
var $ pinyin = $ ( "input.pingy-box");
for (var i = 0; i <this.searchlist.length; i ++) {
// 이름을 저장하고 Pinyin으로 변환합니다
$ pinyin.val (this.searchlist.eq (i) .attr ( "data-name"));
// 중국어를 Pinyin으로 변환합니다
var pinyin = $ pinyin.topinyin (). tolowercase (). 교체 (/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 : function (type, val) {
var s;
var returnArray = [];
// Pinyin
if (type === "pinyin") {
s = 0;
}
//한자
else if (type === "cncharacter") {
s = 1;
}
//숫자
else if (type === "digital") {
s = 2;
}
for (var i = 0; i <this.searchmemberArray.length; i ++) {
// 문자 포함
if (this.searchmemberArray [i] .split ( "&") [s] .indexof (val)> = 0) {
returnArray.push (this.searchmemberArray [i]);
}
}
반환 returnArray;
},
// -------------------------------- [출력 검색 결과]
PostmemberList : function (temparray) {
var html = '';
// 검색 결과가 있습니다
if (temparray.length> 0) {
html + = '<li> 검색 결과 (' + temparray.length + ') </li>';
for (var i = 0; i <temparray.length; i ++) {
var sarray = temparray [i] .split ( "&");
html += '<li>';
html + = '<span>' + sarray [2] + '</span>';
html + = '<span>' + sarray [1] + '</span>';
html += '</li>';
}
}
// 검색 결과가 없습니다
또 다른{
if ($ (this.searchInput) .val ()! = "") {
html += '<li> 검색 결과 없음 ... </li>';
}또 다른{
this.searchresultinner.html ( "");
}
}
this.searchresultinner.html (html);
},
// ------------------------------------- [바인딩 검색 이벤트]
searchActiveEvent : function () {
var searchEngine = this;
$ (document) .on ( "keyup", this.searchInput, function () {
// 발견 된 배열을 임시로 저장합니다
var temparray = [];
var val = $ (this) .val ();
// Pinyin을 판단하기위한 정기 규칙
var pinyinrule = /^[a-za-z]+$ /;
// 중국어 판단 규칙
var cncharacterrule = new regexp ( "^[/u4e00-/u9fff]+$", "g");
// 정수 판단의 규칙 성
var digitalrule = /^+]?d+(.d+)?$/;
// 3 가지 상황 만 검색합니다
// Pinyin
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);
}
또 다른{
searchEndine.searchresultinner.html ( '<li> 검색 결과 없음 ... </li>');
}
SearchEndine.postmemberList (Temparray);
});
}
};
효과가 아주 좋은가요? 친구들은 프로젝트를 아름답게 한 후에 사용할 수 있습니다.