WEBフロントエンドページ_JavaScriptスキルに基づくページコンテンツ検索の実装アイデアの簡単な分析

これは私が Web ページでクエリを実行していた方法です

フォームはキーワードを取得します –> 受信バックエンド 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 === " ジョブ番号/名前")
「100");
if(!isNaN(val))
{
hanld(UserArray,val);
}
else
{
hanld(TurenameArray,val );
}
}
});
function hanld(array,value)
{ （i = 0; i＆lt; array.length; i）
{

}
}



コードは上にあります。以下で設計上のアイデアについて話しましょう。

照合対象のデータを取得し、配列に順番に格納して照合します。

JS 部分文字列の位置指定を使用する Indexof 関数は、一致しない場合は -1 を返し、一致する場合は文字列の位置を返します。

これで検索は完了です。最初にすべてのデータを非表示にし、一致が成功した場合に表示します。大丈夫です