A brief analysis of the implementation ideas of page content search based on WEB front-end pages_javascript skills

This is how I used to do queries on web pages

Form gets keywords –> Incoming back-end SQL statement processing –> Data is returned to the front-end for display

Today I suddenly came across how to implement the Ctrl F function of the browser. It puts the data on the page at once, and then uses JS to match the content of the page.

No matter what, the function is completed now, and then we are optimizing it

Copy code The code is as follows:

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

table.children().each(function(){
userid = $(this).children().eq(0).html();
//Save the student number into the output
UserArray.push(userid);
turename = $(this).children().eq(1).html();
//Save the name in the array

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

});
$(".btn").click(function(){
val = $("#search").val();
if(val === " Job number/name")
                                                                                                                                                                                     "100");
if(!isNaN(val))
{
hanld(UserArray,val);
}
else
{
hanld(TurenameArray,val );
}
}
});
function hanld(array,value)
{
for(i=0;i {
                                                                                                                                                                                                                                                                                                   
}
}



The code is above, let me talk about the design ideas below.

Get the data to be matched and store it in the array in order, and then match.

The indexof function that uses JS substring positioning returns -1 if there is no match, and returns the position of the string if it matches.

This completes your search. Hide all data first, and then display it if the match is successful. That’s OK