Complete the search function in the html page
|
Recently I've been working on a framework that has been modified by many people. I feel dizzy from looking at the code every day, but I feel that I have made great progress. I made a backend that can configure the frontend to view different data ranges of two libraries. I am quite satisfied with it, so I shared it the other day. Today I will talk about a function I made in the past few days, which is the search function of HTML pages. This function is mainly to input characters in the search box and then press the previous or next button at the back. The matching characters in the search area will be automatically marked with a special style. You can then continue to press the previous or next button to browse the matching characters in order, and use another style to distinguish the current matching characters from other matching characters. The front-end display looks like this:
The html is like this:
<div class="container" style="z-index: 999" id="searchDiv">
<div class="keyword-search">
Search for:
<input id="key" type="text" style="width: 200px;" placeholder="Keyword" />
<a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
<a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>
</div>
</div>Script code:
<script>//Search function var oldKey0 = "";
var index0 = -1;var oldCount0 = 0;
var newflag = 0;
var currentLength = 0;
function wordSearch(flg) {
var key = $("#key").val(); //Get key valueif (!key) {
return; //Exit if key is empty}
getArray();
focusNext(flg);
}
function focusNext(flg) {
if (newflag == 0) {//If new search, index is cleared index0 = 0;
}
if (!flg) {
if (oldCount0 != 0) {//If there is still searching if (index0 < oldCount0) {//If the left side is not finished, go to the left focusMove(index0);
index0++;
} else if (index0 == oldCount0) {//All done index0 = 0;
focusMove(index0);
index0++;
}
else {
index0 = 0; //Not confirmed focusMove(index0);
index0++;
}
}
} else {
if (oldCount0 != 0) {//If there is still searching if (index0 <= oldCount0 && index0 > 0) {//If the left side is not finished, go to the left index0--;
focusMove(index0);
} else if (index0 == 0) {//All done index0 = oldCount0;
index0--
focusMove(index0);
}
}
}
}
function getArray() {
newflag = 1;
$(".contrast .result").removeClass("res");
var key = $("#key").val(); //Get key valueif (!key) {
oldKey0 = "";
return; //Exit if key is empty}
if (oldKey0 != key || $(".current").length != currentLength) {
//Reset index0 = 0;
var index = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
pos0 = new Array();
if ($(".contrast-wrap").hasClass("current")) {
currentLength = $(".current").length;
$(".current .contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // replace });
} else {
$(".contrast-wrap").addClass('current');
currentLength = $(".current").length;
$(".contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // replace });
}
//$("#key").val(key);
oldKey0 = key;
//$(".contrast .result").each(function () {
// $(this).parents('.contrast-wrap').addClass('current');
// pos0.push($(this).offset().top);
//});
// pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
oldCount0 = $(".contrast .result").length;
newflag = 0;
}
}
function focusMove(index0) {
$(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
$(".contrast .result:eq(" + index0 + ")").addClass("res");
var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
$(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
$("html, body").animate({ scrollTop: top - 200 }, 200);
} else {
$("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
}
}
$('#key').change(function () {
if ($('#key').val() == "") {
index0 = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
oldKey0 = "";
}
});
</script>Next, let’s remember the implementation principle: First, clear the results of the previous query. Then, according to the value of key, use regular expressions to add special styles to all matching characters in the area. For example, a span tag with a class name of result is added to the method. The odKey0 variable is used to record the value of key (next time, compare first. If they are the same, it means you want to see the next or previous content, and you don’t need to enter and match with regular expressions), oldCount0 records the total number of queries, and newflag is set to 0 (if it is not the first query, newflag is 1). Then enter the getNext method. flg indicates whether the user pressed the previous or next button. Index0 is used to record which matching character is currently being viewed. It is compared with oldCount0 to determine whether to increase or decrease or set to 0 (if it is greater than oldCount0 or less than 0, start over). The focusMove method is used to position the page to the current element. jQuery methods learned: eq() selector: The selector selects the element with the specified index value. For example: parents() method: all parent elements of an element. replace() method: replace the selected element with the specified HTML content. Note that the elements of the selected element are also replaced. offset() method: Returns or sets the offset (position) of the matched elements relative to the document. scrollTop() method: returns or sets the vertical position of the scroll bar of the matched elements. Summarize The above is the editor's introduction to the search function in HTML pages. I hope it will be helpful to everyone. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: MySQL uses the Partition function to implement horizontal partitioning strategy
>>: CSS World--Code Practice: Image Alt Information Presentation
Recommend
Vue realizes the function of uploading photos on PC
This article example shares the specific code of ...
Detailed explanation of basic operation commands such as starting and stopping Nginx under Windows
To use Nginx under Windows, we need to master som...
Some wonderful uses of URL objects in JavaScript
Table of contents Preface Parsing parameters Modi...
Detailed explanation of a method to rename procedure in MYSQL
Recently I have used the function of renaming sto...
Mysql view the maximum number of connections and modify the maximum number of connections
MySQL View the maximum number of connections and ...
A Deep Understanding of Angle Brackets in Bash (For Beginners)
Preface Bash has many important built-in commands...
javascript Blob object to achieve file download
Table of contents illustrate 1. Blob object 2. Fr...
Coexistence of python2 and python3 under centos7 system
The first step is to check the version number and...
Solution to the problem of MySQL thread in Opening tables
Problem Description Recently, there was a MySQL5....
A Brief Analysis of MySQL PHP Syntax
Let's first look at the basic syntax of the c...
Detailed explanation of the error problem of case when statement
Preface In the MySQL database, sometimes we use j...
Nginx configuration based on multiple domain names, ports, IP virtual hosts
1. Type introduction 1.1 Domain-based virtual hos...
MySQL 8.0.25 decompression version installation and configuration method graphic tutorial
MySQL 8.0.25 decompression version installation t...
Java uses Apache.POI to export HSSFWorkbook to Excel
Use HSSFWorkbook in Apache.POI to export to Excel...
How to use boost.python to call c++ dynamic library in linux
Preface Recently I started using robot framework ...