WEB 프론트엔드 페이지_javascript 기술을 기반으로 한 페이지 콘텐츠 검색 구현 아이디어에 대한 간략한 분석

저는 웹페이지에서 쿼리를 이렇게 했습니다

양식에서 키워드 가져오기 –> 들어오는 백엔드 SQL 문 처리 –> 데이터를 프런트엔드로 반환하여 표시

오늘은 갑자기 브라우저의 Ctrl F 기능을 페이지에 올려놓고 JS를 이용해 페이지의 내용을 일치시키는 방법을 알아냈습니다.

무슨 일이 있어도 지금은 기능이 완성되어 최적화 중입니다

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

$(function(){
var UserArray = new Array();
var TurenameArray = new Array();
var table = $("table>tbody");

table.children().each(function( ){
userid = $(this).children().eq(0).html();
//학생 번호를 출력에 저장
UserArray.push(userid);
turename = $(this).children().eq(1).html();
//배열에 이름을 저장합니다

$("#search").focus(function() {
$(this).val("");
}).blur(function(){
val = $.trim($(this).val());
if (val === "")

});
$(".btn").click(function(){
val = $("#search").val() ;
if(val === " 작업 번호/이름")
                                                                                 > hanld(UserArray,val);
}
else
{
hanld(TurenameArray,val );
}
}
});
function hanld(array,value)
{
for(i=0;i {
                                                                       ~ >
코드는 위에 있고, 아래에서는 디자인 아이디어에 대해 이야기하겠습니다.

매칭할 데이터를 가져와서 배열에 순서대로 저장한 후 매칭을 시켜주세요.

JS 하위 문자열 위치 지정을 사용하는 indexof 함수는 일치하는 항목이 없으면 -1을 반환하고, 일치하는 경우 문자열의 위치를 ​​반환합니다.

검색이 완료되었습니다. 먼저 모든 데이터를 숨긴 다음 일치에 성공하면 표시합니다. 괜찮아요