edwardbeckett
12/12/2014 - 2:49 AM

JS_Demo App

JS_Demo App
content_copyfile_download
<html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/htmlparser.js"></script>
<style>
	.highlight {
		background-color: yellow
	}
</style>
<script>
window.received = function( data ) {

	if( data instanceof Object ) {
		var rawdata = data.parse.text,
			matches = [],
			content = $( "#contents" );
		$.each( rawdata, function( k, v ) {
			matches.push( v );
			$( content ).html( matches );
		} );

		$( content ).children().not( "p" ).remove();

		$( "#searchbox" ).on( "keyup input keypress", function() {
			$( "*" ).removeHighlight();
			$( "#contents p" ).highlight( $( "#searchbox" ).val() );
			if( this.value.length > 0 ) {
				$( "#contents p" ).hide().filter( function() {
						return $( this ).text().toLowerCase().indexOf( $( "#searchbox" ).val().toLowerCase() ) != -1
					}
				).show();

			} else {
				$( "#contents p" ).hide();
			}

		} );
	}
};

</script>

<body>
<div>
	<div id="searchbar">
	<input id="searchbox" type="text" />
	</div>
</div>
<div id="contents" style="width: 100%; height:100%;">

</div>
</body>
<script src="http://en.wikipedia.org/w/api.php?action=parse&page=JavaScript&format=json&prop=text&section=0&callback=received">
</script>
<script>
	jQuery.fn.highlight=function(c){function e(b,c){var d=0;if(3==b.nodeType){var a=b.data.toUpperCase().indexOf(c);if(0<=a){d=document.createElement("span");d.className="highlight";a=b.splitText(a);a.splitText(c.length);var f=a.cloneNode(!0);d.appendChild(f);a.parentNode.replaceChild(d,a);d=1}}else if(1==b.nodeType&&b.childNodes&&!/(script|style)/i.test(b.tagName))for(a=0;a<b.childNodes.length;++a)a+=e(b.childNodes[a],c);return d}return this.length&&c&&c.length?this.each(function(){e(this,c.toUpperCase())}): this};jQuery.fn.removeHighlight=function(){return this.find("span.highlight").each(function(){this.parentNode.firstChild.nodeName;with(this.parentNode)replaceChild(this.firstChild,this),normalize()}).end()};
</script>
</html>