Good evening,
As for the short time I learned HTML5 and CSS3, I am learning JavaScript at the moment. I'm creating a webpage but I'm having difficulty in the search box creation part. I have already created it (I used the input tag with name="search") but I do not know how to get it to search the page content. If you could help, thank you very much.
Thank you
I think all web surfers know how to search the page because almost all internet browsers have a search tool that allows you to search for words or corresponding phrases on the pages you access. Just type Ctrl + f (windows) or Command + F (Mac) that a search box will pop up.
But it is also possible with a few lines of code to implement this search box on the page.
CSS
.found {background-color:#f99;}
#searchbox {width:350px; position:absolute;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight-10);
left:0; top:0;}
body > #searchbox {position:Fixed;}
#searchbox fieldset {border:0;text-align:center;margin:3px;}
#searchbox input {margin:1px;padding:2px;}
#search {width:140px;}
JavaScript
inPageSearch = function() {document.getElementsByClassName = function(cl) {var retnode, myclass, elem,classes; retnode = []; myclass = new RegExp('\b'+cl+'\b'); elem = this.getElementsByTagName('*'); for (var i = 0, ii = elem.length ; i < ii ; i++) {classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]);} return retnode;}; elemTop = function(elem) {return elem.top || elem.pixelTop || elem.offsetTop || 0;}; search = function(str) {nodewalk = function(node, str) {var re, m, s, r, frag, sp; for (var i = 0; i < node.length; i++) {if (node[i].hasChildNodes() && 'SCRIPT' !== node[i].nodeName) nodewalk(node[i].childNodes,str); re = new RegExp(str,'ig'); if (3 === node[i].nodeType) {m = node[i].nodeValue.match(re); s = node[i].nodeValue.split(re); frag = document.createDocumentFragment(); if (m !== null) {frag.appendChild(document.createTextNode(s[0])); for (var j = 0, jj = m.length; j < jj; j++) {sp = document.createElement('span'); sp.appendChild(document.createTextNode(m[j])); sp.className = 'found'; frag.appendChild(sp);frag.appendChild(document.createTextNode(s[j+1]));} node[i].parentNode.replaceChild(frag,node[i]);i+=jj*2;}}}}; nodewalk(document.getElementsByTagName('body')[0].childNodes, str);}; clearfound = function(node) {var txt = node.previousSibling.nodeValue + node.firstChild.nodeValue + node.nextSibling.nodeValue; node.parentNode.removeChild(node.nextSibling); node.parentNode.removeChild(node.previousSibling); node.parentNode.replaceChild(document.createTextNode(txt), node);}; var d, F, fld, inp, b1, b2, b3; d =document.createElement("div"); d.id = 'searchbox'; F = document.createElement("form"); fld = document.createElement("fieldset"); inp = document.createElement("input"); inp.type = 'text'; inp.id = 'search'; fld.appendChild(inp); b1 = document.createElement("input"); b1.type = 'button'; b1.id = 'search1'; b1.value = 'Search'; b1.title = 'Buscar todos'; fld.appendChild(b1); F.appendChild(fld); d.appendChild(F); document.getElementsByTagName('body')[0].appendChild(d); document.getElementById('search1').onclick = function() {var nodes = document.getElementsByClassName('found'); for (var i = nodes.length - 1; i >= 0; i--) clearfound(nodes[i]); search(document.getElementById('search').value); window.scrollTo(0, elemTop(document.getElementsByClassName('found')[0])); return false;}; document.getElementById('search2').onclick = function() {var nodes = document.getElementsByClassName('found'); clearfound(nodes[0]); window.scrollTo(0, elemTop(document.getElementsByClassName('found')[0])); return false;};
document.getElementById('searchx').onclick = function() {var nodes = document.getElementsByClassName('found'); for (var i = nodes.length - 1; i >= 0; i--) clearfound(nodes[i]); document.getElementById('searchbox').style.display = 'none'; setTimeout(function() {document.getElementsByTagName('body')[0].removeChild(document.getElementById('searchbox'));},5);};};
inPageSearch();
If you want the search box to appear when the page loads, use
<body onload="inPageSearch ()">
If you prefer to open the search box via link use
<a href="javascript:void(0)" onClick="inPageSearch ()">Search</a>