1. The Web contains three directories:
1.1 content.htm // run the file directly.
1.2 js // Several js files useful here, where the data source starting with db (that is, the json string)
1.3 css // css.
2. Run content.htm directly to view the page and search results.
3. The principle is very simple, but the index function of javascript is used.
Core code:
Copy codeThe Code is as follows:
/*
Author: liulf
Function:
Var _ db_cpcj = vCpcj;
Var _ db_cp = vCp;
Var vCp = {"cppage ":[
{"Cpdh": "A01000101", "page": "1", "ca": "1309-36-0", "mc": "", "ename": "Pyrite", "bm":" "},
{"Cpdh": "A01000201", "page": "1", "ca": "1309-36-0", "mc": "Sulfur Concentrate ", "ename": "Pyrite concentrate; Sulfur concentrate", "bm ":""},
{"Cpdh": "A01000202", "page": "1", "ca": "1309-36-0", "mc": "Sulfur Concentrate Powder ", "ename": "Powdered pyrite concentrate; Pyrites concentrate, powder; Sulfur concentrate, powder", "bm": "Sulfur concentrate "},
{"Cpdh": "A02000101", "page": "1", "ca": "", "mc": "phosphate ore", "ename ": "Phosphorus ore", "bm ":""},
{"Cpdh": "A02000111", "page": "2", "ca": "", "mc": "phosphate ore", "ename ": "Phosphorite grit", "bm ":""},
{"Cpdh": "A02000201", "page": "2", "ca": "", "mc": "phosphate rock powder", "ename ": "Phosphate rock powder", "bm ":""},
{"Cpdh": "A03000101", "page": "2", "ca": "12447-04-0", "mc": "Boron Ore ", "ename": "Ascharite; Boric ore", "bm": "Boron and magnesium "},
{"Cpdh": "A04000101", "page": "2", "ca": "", "mc": "Potash", "ename": "Potash feldspar; potassium feldspars "," bm ":""},
{"Cpdh": "A04000201", "page": "2", "ca": "12003-63-3", "mc": "Long powder ", "ename": "Feldspar powder", "bm ":""},
{"Cpdh": "A04000301", "page": "2", "ca": "", "mc": "Halogen Stone", "ename": "Carnallite ", "bm ":""}
]}
Var vCpcj = {"cjpage": [{"cjdh": "110634", "cm": "Bayer Optical Fiber Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110052", "cm": "Beijing Iris ink Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110408", "cm": "Beijing aisk Pharmaceutical Technology Development Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110010", "cm": "Beijing edutepe membrane factory", "pagen": "1701 "},
{"Cjdh": "110165", "cm": "Beijing Anshi Technology Development Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110134", "cm": "Beijing anshunda decorative materials Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110291", "cm": "Beijing Obo star biotechnology Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110191", "cm": "Beijing Otis Chemical Co. Ltd.", "pagen": "1701 "},
{"Cjdh": "110454", "cm": "Beijing Auckland Waterproof Engineering Co., Ltd.", "pagen": "1701 "},
{"Cjdh": "110520", "cm": "Beijing aosen special lubricating Material Factory", "pagen": "1701"}]}
Ocent
*/
Function ObjSearch ()
{
This. kw = '';
This. option = '';
This. displayId = '';
This. search = function ()
{
// If (this. kw = ''| this. kw = null | this. kw. length <3)
//{
// Alert ('the input length cannot be less than 3! ');
// Return;
//}
// Switch (this. option)
//{
//// Enterprise
// Case '0 ':
// This. searchCpcj ();
// Break;
/// Product
// Case '1 ':
// This. searchCp ();
// Break;
//}
OutputHtml (this );
}
This. searchCpcj = function ()
{
Var jsonObj = new Array ();
Var kw = this. kw;
// ('{'{This.displayid}.html ('');
// Var displayId = this. displayId;
$ (VCpcj. cjpage). each (function (index, content ){
// Var cjdhy = content. cjdh;
// Var cm = content. cm;
// Var pagen = content. pagen;
If (content. cm. indexOf (kw )! =-1)
{
// $ ('#' + DisplayId ). append ("<a href = '#'>" + cm + "|" + pagen + "</a> <br/> ");
JsonObj. push ({"cm": content. cm, "pagen": content. pagen });
}
});
Return jsonObj;
}
This. searchCp = function ()
{
Var jsonObj = new Array ();
Var kw = this. kw;
// ('{'{This.displayid}.html ('');
// Var displayId = this. displayId;
$. Each (vCp. cppage, function (index, content ){
// Var cpdh = content. cpdh;
// Var page = content. page;
// Var ca = content. ca;
// Var mc = content. mc;
// Var ename = content. ename;
// Var bm = content. bm;
If (content. mc. indexOf (kw )! =-1)
{
// $ ('#' + DisplayId ). append ("<a href = '#'>" + mc + "|" + page + "</a> <br/> ");
JsonObj. push ({"mc": content. mc, "page": content. page });
}
});
Return jsonObj;
}
}
<! --//
Function __$ $ (id) {return document. getElementById (id);} // defines the method for obtaining the ID
Function GotoPage (num) {// jump page
Page = num;
OutputHtml (OS );
}
Var PageSize = 20; // Number of pages per page
Var Page = 1; // current Page number
Function OutputHtml (){
// The selected enterprise or product
Var vobj = arguments [0];
Var vtmp1 = vobj. option;
Var siteList = '';
Switch (vtmp1)
{
// Enterprise
Case '0 ':
SiteList = OS. searchCpcj ();
Var obj = eval (siteList); // get JSON
// Var sites = obj. cjpage;
Var sites = obj;
Break;
// Product
Case '1 ':
SiteList = OS. searchCp ();
Var obj = eval (siteList); // get JSON
// Var sites = obj. cppage;
Var sites = obj;
Break;
}
// Obtain the total number of pages
Var Pages = Math. floor (sites. length-1)/PageSize) + 1;
If (Page <1) Page = 1; // if the current Page number is smaller than 1
If (Page> Pages) Page = Pages; // if the current Page number is greater than the total number
Var Temp = "";
Var BeginNO = (Page-1) * PageSize + 1; // start number
Var EndNO = Page * PageSize; // end number
If (EndNO> sites. length) EndNO = sites. length;
If (EndNO = 0) BeginNO = 0;
If (! (Page <= Pages) Page = Pages;
__$ $ ("Total "). innerHTML = "Total number of pages: <strong class = 'f90'>" + sites. length + "</strong> display: <strong class = 'f90'>" + BeginNO + "-" + EndNO + "</strong> ";
// Pagination
If (Page> 1 & Page! = 1) {Temp = "<a href = 'javascript: void (0) 'onclick = 'gotopage (1) '> <Page 1 </a> <a href = 'javascript: void (0)' onclick = 'gotopage ("+ (Page-1) + ") '> previous page </a> "} else {Temp =" <previous page "};
// Perfect flip list
Var PageFrontSum = 3; // The number displayed before the page
Var PageBackSum = 3; // The number displayed after the page
Var PageFront = PageFrontSum-(Page-1 );
Var PageBack = PageBackSum-(Pages-Page );
If (PageFront> 0 & PageBack <0) PageBackSum + = PageFront; // There are many first few and then many, and the first remaining space is given
If (PageBack> 0 & PageFront <0) PageFrontSum + = PageBack; // you can add more places to the front
Var PageFrontBegin = Page-PageFrontSum;
If (PageFrontBegin <1) PageFrontBegin = 1;
Var PageFrontEnd = Page + PageBackSum;
If (PageFrontEnd> Pages) PageFrontEnd = Pages;
If (PageFrontBegin! = 1) Temp + = '<a href = "javascript: void (0)" onclick = "GotoPage (' + (Page-10) + ') "title =" first 10 pages "> .. </a> ';
For (var I = PageFrontBegin; I <Page; I ++ ){
Temp + = "<a href = 'javascript: void (0) 'onclick = 'gotopage (" + I + ") '>" + I + "</a> ";
}
Temp + = "<strong class = 'f90'>" + Page + "</strong> ";
For (var I = Page + 1; I <= PageFrontEnd; I ++ ){
Temp + = "<a href = 'javascript: void (0) 'onclick = 'gotopage (" + I + ") '>" + I + "</a> ";
}
If (PageFrontEnd! = Pages) Temp + = "<a href = 'javascript: void (0) 'onclick = 'gotopage (" + (Page + 10) + ") 'title = 'Next 10 page'> .. </a> ";
If (Page! = Pages) {Temp + = "<a href = 'javascript: void (0) 'onclick = 'gotopage (" + (Page + 1) + "); '> next page </a> <a href = 'javascript: void (0) 'onclick = 'gotopage ("+ Pages + ") '> last page >></a> "} else {Temp + =" last page on the next page >> "}
__$ $ ("Pagelist"). innerHTML = Temp;
// Output data
If (EndNO = 0) {// if it is null
__$ $ ("Pagelist"). innerHTML = '';
__$ $ ("Content"). innerHTML = "Return;
}
Var html = "";
For (var I = BeginNO-1; I <EndNO; I ++ ){
Switch (vtmp1)
{
// Enterprise
Case "0 ":
Html + = "<a href = '# 'rel = 'bookmark' title =" + sites [I]. cm + "> ";
Html + = "<p class = 'url'> <span>" + sites [I]. cm + "|" + sites [I]. pagen + "</span> </p> </a> ";
Break;
// Product
Case "1 ":
// If (sites [I]. mc. indexOf (vobj. kw) =-1) continue;
Html + = "<a href = '# 'rel = 'bookmark' title =" + sites [I]. mc + "> ";
Html + = "<p class = 'url'> <span>" + sites [I]. mc + "|" + sites [I]. page + "</span> </p> </a> ";
Break;
}
}
__$ $ ("Content"). innerHTML = html;
ClickShow (); // call the mouse click event
// Flip the left and right buttons of the keyboard
Document. onkeydown = function (e ){
Var theEvent = window. event | e;
Var code = theEvent. keyCode | theEvent. which;
If (code = 37 ){
If (Page> 1 & Page! = 1 ){
GotoPage (Page-1 );
}
}
If (code = 39 ){
If (Page! = Pages ){
GotoPage (Page + 1 );
}
}
}
// Scroll the page
Function handle (delta ){
If (delta> 0 ){
If (Page> 1 & Page! = 1 ){
GotoPage (Page-1 );
}
}
Else {
If (Page! = Pages ){
GotoPage (Page + 1 );
}
}
}
Function wheel (event ){
Var delta = 0;
If (! Event)/* For IE .*/
Event = window. event;
If (event. wheelDelta) {/* IE or Opera .*/
Delta = event. wheelDelta/120;
/** In Opera9, event processing is different from that in IE
*/
If (window. opera)
Delta =-delta;
} Else if (event. detail) {/** compatible with Mozilla .*/
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
Delta =-event. detail/3;
}
/** Trigger if the increment is not equal to 0
* The main function is to roll the scroll wheel up or down.
*/
If (delta)
Handle (delta );
}
/** Initialization */
If (window. addEventListener)
/** Mozilla DOM-based scroll event **/
Window. addEventListener ("DOMMouseScroll", wheel, false );
/** IE/Opera .*/
Window. onmousewheel = document. onmousewheel = wheel;
}
// Obtain the link address and website name
Function showLink (source ){
Var siteUrl =__ $ ("siteurl ");
Var siteName =__ $ ("sitename ");
Var description =__ $ ("description ");
If (source. getAttribute ("rel") = "bookmark "){
Var url = source. getAttribute ("href ");
Var title = source. getAttribute ("title ");
SiteUrl. innerHTML = "<a href = '" + url + "'target =' _ blank '>" + url + "</a> ";
SiteName. innerHTML = title;
}
}
// Mouse click event
Function clickShow (){
Var links =__ $ ("content"). getElementsByTagName ("");
For (var I = 0; I <links. length; I ++ ){
Var url = links [I]. getAttribute ("href ");
Var title = links [I]. getAttribute ("title ");
Links [I]. onclick = function (){
// ShowLink (this );
Return false;
}
}
}
// -->
Package